### LESS

LESS variables are exactly the same as Sass variables, except the variable names are prepended with the @ symbol.

### Stylus

Stylus variables don't require anything to be prepended to them, although it allows the \$ symbol. As always, the ending semicolon is not required, but an equal sign in between the value and variable is. One thing to note is that Stylus (0.22.4) compiles if we prepend the @ symbol to a variable name, but will not apply the value when referenced. In other words, don't do that.

### Compiled CSS

Each of the above files will compile to the same CSS. You can use your imagination to see how useful variables can be. We will no longer need to change one color and have to retype it twenty times, or want to change our site width and have to dig around to find it. Here's the CSS after compilation:

## Nesting

If we need to reference multiple elements with the same parent in our CSS, it can be tedious to keep writing the parent over and over.

Instead, using a preprocessor, we can write the children selectors inside the parent's brackets. Also, the & symbol references the parent selector.

### Sass, LESS, & Stylus

All three preprocessors have the same syntax for nesting selectors.

### Compiled CSS

This is the compiled CSS from the code above. It is exactly the same as when we started—how convenient!

## Mixins

Mixins are functions that allow the reuse of properties throughout our stylesheet. Rather than having to go throughout our stylesheet and change a property multiple times, we can now just change it inside our mixin. This can be really useful for specific styling of elements and vendor prefixes. When mixins are called from within a CSS selector, the mixin arguments are recognized and the styles inside the mixin are applied to the selector.

### Compiled CSS

All the preprocessors compile to the same code below:

## Inheritance

When writing CSS the old-fashioned way, we could use the following code to apply the same styles to multiple elements at once:

That works great, but if we need to further style the elements individually, another selector has to be created for each and it can quickly get messier and harder to maintain. To counter this, inheritance can be used. Inheritance is the ability for other CSS selectors to inherit the properties of another selector.

### LESS

LESS doesn't truly support inheriting styles like Sass and Stylus. Instead of adding multiple selectors to one set of properties, it treats inheritance like a mixin without arguments and imports the styles into their own selectors. The downside to this is that the properties are repeated in your compiled stylesheet. Here's how you would set it up:

### Compiled CSS (LESS)

As you can see, the styles from .block were inserted into the selectors that we wanted to give the inheritance to. It's important to note that priority can become an issue here, so be cautious.

## Importing

In the CSS community, importing CSS is frowned upon because it requires multiple HTTP requests. Importing with a preprocessor works differently, however. If you import a file from any of the three preprocessors, it will literally include the import during the compile, creating only one file. Keep in mind though that importing regular .css files compiles with the default @import "file.css"; code. Also, mixins and variables can be imported and used in your main stylesheet. Importation makes creating separate files for organization very worthwhile.

## Color Functions

Color functions are built in functions that will transform a color upon compilation. This can be extremely useful for creating gradients, darker hover colors, and much more.

### Sass

This is only a short list of the available color functions in Sass, a full list of available Sass color functions can be found by reading the Sass Documentation.

Color functions can be used anywhere that a color is valid CSS. Here's an example:

### LESS

A list of all the LESS functions can be found by reading the LESS Documentation.

Here's an example of how to use a color function in LESS:

### Stylus

A full list of all the Stylus color functions can be found by reading the Stylus Documentation.

Here's an example using Stylus color functions:

## Operations

Doing math in CSS is quite useful, and now fully possible. It's simple and this is how to do it:

## Practical Applications

We have covered a lot of the features and new things that preprocessors can do, but we haven't covered anything hands-on or practical. Here's a short list of real-world applications where using a preprocessor is a life-saver.

### Vendor Prefixes

This is one of the hyped up reasons to use a preprocessor and for a very good reason—it saves loads of time and tears. Creating a mixin to handle vendor prefixes is easy and saves a lot of repetition and painful editing. Here's how to do it:

### 3D Text

Faking 3D text using multiple text-shadows is a clever idea. The only problem is that changing the color after the fact is difficult and cumbersome. Using mixins and color functions, we can create 3D text and change the color on the fly!

#### Stylus

I chose to write the Stylus text-shadows on one line because I omitted the curly brackets.

### Columns

Using number operations and variables for columns is an idea I came up with when I was first playing with CSS preprocessors. By declaring a desired width in a variable, we can easily change it down the road without any mental-math. Here's how it's done:

## Notable Quirks

There are quite a few quirks to using a CSS preprocessor. I'm going to go over a few of the fun ones, but if you're really interested in finding them all I recommend you scour the documentation or, better yet, just start using a preprocessor in your daily coding.

### Error Reporting

If you've written CSS for any decent amount of time, I am sure you have reached a point where you had an error somewhere and simply could not find it. If you're anything like me you probably spent the afternoon pulling your hair out and commenting out various things to hunt the error down.

CSS preprocessors report errors. It's just that simple. If there's something wrong with your code it tells you where, and if you're lucky: why. You can check out this blog post if you're interested in seeing how errors are reported in the different preprocessors.

### Comments

When compiling with a CSS preprocessor, any double-slash comment gets removed (e.g. //comment) and any slash-asterisk comment stays (e.g. /* comment */). That being said, use double-slash for comments you want on the non-compiled side and slash-asterisk for comments you want visible after the compilation.

Just a note: if you compile minified, all comments are removed.

## Conclusion

Each CSS preprocessor we covered (Sass, LESS, and Stylus) has its own unique way of accomplishing the same task— giving developers the ability to use useful, unsupported features while keeping browser compatibility and code cleanliness.

While not a requirement for development, preprocessors can save a lot of time and have some very useful features.

I encourage you all to try as many of the preprocessors as possible so that you can effectively choose a favorite and know why it is favored over the numerous others. If you haven't yet tried using a preprocessor to write your CSS, I highly recommend you give it a try.

Do you have a favorite CSS preprocessor feature I didn't mention? Is there something one can do that another cannot? Let us know in the comments below!

A special thanks to Karissa Smith, a super-talented friend of mine that created the preview thumbnail for this article.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.