CSS Preprocessors: A Guide to Efficient Stylesheets
Yona GidalevitzJune 29th, 201510 minute read
Yona is Codal’s Technical Writer. At Codal, he is responsible for content strategy, documentation, blogging, and editing. He works closely with Codal’s UX, development, marketing, and administrative teams to produce all manner of written content. In his free time, Yona is an avid guitarist, cook, and traveler.
Cascading style sheets give web developers the ability to organize basic html content in a beautiful and robust way. On it's own, CSS has many powerful features, however it can often be inefficient without the aide of third party tools, which can also add useful functionality.
CSS preprocessors give web developers the ability to use awesome, traditionally-unsupported features in your stylesheets, without disrupting browser compatibility and code organization. The most widely used CSS preprocessors are LESS, Sass, and Stylus.
We've compiled an in-depth analysis of the most sought-after of these features.
Sass and LESS are more or less syntactically identical to standard CSS. The only difference here is that both Sass and LESS have their own file extensions – .scss and .less.
Stylus is a little more syntactically distinct than Sass and LESS from standard CSS. Stylus accepts both the standard CSS syntax, and variations of CSS syntax where brackets, colons, and semicolons are all optional.
Variables are among the features that make CSS preprocessors so powerful. A variable can be declared and used anywhere in the CSS stylesheet, and can possess any value that that is usable by standard CSS.
Sass variables are prepended with the dolar-sign symbol and separated with a semicolon.
LESS variables function in the same way that Sass variables do, except they are prepended with the "@" symbol.
Stylus variables also function in the same way as Sass and LESS variables, however in typical Stylus fashion, the semi-colons and prepending symbols are completely optional.
Mixins allow you to reuse element properties throughout the stylesheet in such a way that you don't need to define them in every location where the same property is used. Consider the following code sample:
CSS preprocessors allow you to nest multiple elements within the same parent in the stylesheet in a much more elegant and simple way. Syntactically, Sass, LESS, and Stylus all have the same way of employing nested elements.
Inheritance allows you to inject the properties of one CSS selector into another selector. In Sass and Stylus, the "@extend" command is used to accomplish this task.
LESS does not offer true support for this functionality. Instead, in the compiled CSS, the properties are repeated in each separate selector, resulting in excess code.
Traditionally, importing one CSS file into another is considered to have a detrimental effect on the overall
performance of your site, due to the multiple HTTP requests that must be made to do so at page load.
When using a CSS preprocessor, however, the imported information is actually included in the compiled CSS stylesheet. This can make the task of organizing your CSS much more straightforward, as you can divide it up among different files without worrying about additional lag at load time. Sass, LESS, and Stylus all utilize the same syntax for importing files.
Color functions are pre-built functions that give you the ability to transform an existing color value in a very precise way. Using color functions, you are able to give an element a precise variation of the color properties that are already stored in a variable. Some notable color functions include darken, lighten, saturate, grayscale, invert, and more.
Sass, LESS, and Stylus are all able to utilize color functions in more or less the same way. For a comprehensive list of available color functions, check out the Sass, LESS, and Stylus documentation, respectively.
CSS preprocessors enable you to do math, which can be quite useful when defining borders or element parameters. Here’s an example of how math operations work in Sass, LESS, and Stylus:
Without a preprocessor, it can be extremely cumbersome to find the source of an error in your CSS. For projects that span hundreds of lines of CSS, trying to find the location of an error can take hours of commenting out entire blocks of code. CSS preprocessors make this task nearly effortless. In addition to reporting errors, CSS preprocessors show you how, and sometimes why, the error occurred.