HTML and CSS Reference
One of the earliest style languages designed for this is called Sass. Now, we have
a few more, the most popular ones being Sass, Less, and Stylus. In both Sass and
Less, valid CSS is automatically valid Sass and Less code. This makes it trivial to
port it from CSS to these languages.
Typically, you would be writing your style rules in files named as main.scss (if you
are using Sass), main.less (if you are using Less), or main.styl (if you are using
Stylus). Using the compilers that come with each of these languages, these files will
respectively be compiled to styles.css .
Using style languages has many merits, such as the following:
• These languages enable you to always write syntactically valid
stylesheets as they all throw an error if you use any invalid syntax.
• All of these languages provide some of the sought-after features in CSS,
such as variables, ability to re-use style rules in other classes without
repeating yourself several times, arithmetic calculations, color functions,
• You can choose to output expanded readable styles when developing,
and then output a compact performance-optimized, whitespace-stripped
stylesheet when you are using it in production.
However, using style languages also has some disadvantages, as explained in the
• While it is easy to convert to Sass or Less, it is not possible to make modi-
fications in the resulting stylesheet and have those changes be ported
over to their original Sass/Less/Style files. So, you need to be careful to
make sure nobody edits the resulting CSS files.
• Working in a team requires the whole team to co-opt to use one of these
languages. Without that, it is impossible to maintain two forks of the
stylesheets and keep them in sync.
• When debugging, if you are inspecting an element, most debuggers only
reveal the line numbers in a stylesheet and not in the original language