What is a CSS preprocessor?

A CSS preprocessor is a development tool that extends the functionality of CSS by adding additional features, such as variables, mixins (common code snippets), functions, loops and much more.

The two major competitors in this area are Sass and Less.

Using plugins for development software, or the command line, Sass and Less can be compiled into standard CSS files, meaning that the generated styles are compatible with existing websites and browsers.

There are also many other benefits, but more on that later...

Using Less CSS

We originally started to use Less as a CSS preprocessor for our front end development at Gibe Digital becuase there was a great tool available for Visual Studio (our main development software) called Web Essentials, which compiled Less to CSS on file save/publish.

This instantly changed the way we thought about CSS, as variables and mixins became available, reducing the amount of CSS that needed to be written. We could also start to nest our CSS statments, which meant we could quickly expand and collapse statements, replicating the HTML markup, improving readability.

We really loved being able to split our CSS into modular files, which, when compiled, would be brought into the master Less file reducing the number of file requests if you were to take a traditional modular CSS approach.

Switching to Sass CSS

After various updates to Visual Studio and Web Essentials, the Less compiler became slow and difficult to work with. Web Essentials also introduced the ability to preprocess and compile SASS. This meant that we could now try another tool.

With all the same benefits as Less, the Sass compiler was far quicker and much improved on the Less compiler in Web Essentials. It also allowed us to reduced the number of CSS files used by media queries on our websites to a single request, as we could introduce media query mixins that combined CSS for mobile, tablet and desktop breakpoints.

Benefits of using Sass

Extra functionality

CSS preprocessors add extra functionality to CSS. Sass is no exception and has a vast array of functionality that it brings to your stylesheets:

1. Variables: storing common values for colours, fonts and sizes is now easier, just by calling a predefined variable, like so:
   
   

   $colorRed: #c00;
   color: $colorRed;

2. Nesting: nested HTML is common and clear to see in your markup. Sass lets you you nest your CSS to reflect your HTML structure, like so:
   
   

   nav{  ul  {    li    {      display: inline-block;    }  }}

3. Import: you can split your Sass into modular files and reference those files in a master Sass file. By prefixing with an underscore, you can also stop the compiler from generating a separate CSS file, like so:
   
   

   @import "_reset.sass";

4. Mixins: these are common snippets of CSS (such as browser prefixes) that crop up in your styles more than once. Rather than writing the CSS again and again, you can call a predefined mixin, like so:
   
   

   @mixin border-radius($radius){  -moz-border-radius: $radius;  -webkit-border-radius: $radius;  border-radius: $radius;}

   One benefit of using mixins is, if a browser prefix changes, you can quickly update a single mixin that will affect all uses in your Sass, rather than having to find and replace each mention.
5. Extending: CSS statements that share CSS can be quickly managed using the Sass extend functionality, like so:
   
   

   .message{  border: 1px solid #ccc;  color: #666;  padding: 10px;}.success{  @extend .message;  border-color: green;  color: green;}

6. Operators: being able to do maths in your CSS is a huge bonus! Sass allows common maths operators like +, -, *, / and % It is super quick to add one or two pixels to the base font size for a title, like so:

   body{  font-size: $fontSize;}h1, h2{  font-size: $fontSize + 4;}h3, h4, h5, h6{  font-size: $fontSize + 2;}

Minification

Our compiler in Web Essentials for Visual Studio automatically creates a CSS and minified CSS file. This removes comments, whitespace and other unnecessary "bloat" to your finalised CSS files.

Easier media queries

We found a very useful mixin that lets you create mobile-first media queries that can be used by both modern and older browsers. This is very useful for older versions of Internet Explorer (IE) that cannot support media queries.

Reduced file requests

We are now able to combine all our modular CSS and media query CSS into a single file request, rather than separate files for each breakpoint.

Reduced file requests area huge benefit for pagespeed, search engine optimisation scores and speed perception for a user when using a website.

Functions

There are lots of functions in Sass that let you affect CSS dynamically, without the need to create multiple variables or mixins. For example, look how quickly you can darken a colour by 10% in the footer of your website:

header{  background: $colorLightBlue;}footer{  background: darken($colorLightBlue, 10%);}

Find out more about Sass

You will always be learning something new with CSS preprocessors, and developers are coming up with more functionality for Sass and Less all the time!

Find out more about Sass with the online documentation.