CSS Preprocessors

CSS on its own can be fun, however stylesheets are getting larger, complex and harder to maintain. This is where a preprocessors can help. Preprocessors have features that don’t exist in CSS like, variables, nesting, mixins and more that make writing CSS fun again.

When you make changes to your file the preprocessor will save it out as a CSS file that you can use in your web site.

SASS, LESS and Stylus are three great pre-processors, all are very similar and developers will have their preference. In this article I’m going over SASS because it is more widely adopted preprocessor developers are using right now. You can read up on the syntax differences below.

Sass vs. LESS vs. Stylus: Preprocessor Shootout

SASS appeared back in 2007 and the latest release is packed with awesome features. Let’s looks at why SASS is awesome.

Variables

Variables can be declared and used throughout the stylesheet. They can have any value that is a CSS value and can be referenced anywhere throughout our stylesheet. Sass variables are prepended with the $ symbol and the value and name are separated with a semicolon, just like a CSS property.

// set your variables like this
$main-color: #0982c1;
$site-width: 1024px;
$border-style: dotted;
body {
    color: $main-color;
    border: 1px $borderStyle $main-color;
    max-width: $site-width;
}

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:

body {
    color: #0982c1;
    border: 1px dotted #0982c1;
    max-width: 1024px;
}

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.

section { 
    margin: 10px;
}
section nav { 
    height: 25px;
}
section nav a { 
    color: #0982C1;
}
section nav a:hover {
    text-decoration: underline;
}

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

section {
    margin: 10px;
nav {
        height: 25px;
a {
            color: #0982C1;
            // same as a:hover
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

Compiled CSS

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

section {
    margin: 10px;
}
section nav {
    height: 25px;
}
section nav a {
    color: #0982C1;
}
section nav a:hover {
    text-decoration: underline;
}

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.

// Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified
@mixin error($border-width: 2px) {
    border: $border-width solid #F00;
    color: #F00;
}
.generic-error {
    padding: 20px;
    margin: 4px;
    @include error(); /* Applies styles from mixin error */
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    @include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

Compiled CSS

All the preprocessors compile to the same code below:

.generic-error {
    padding: 20px;
    margin: 4px;
    border: 2px solid #f00;
    color: #f00;
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    border: 5px solid #f00;
    color: #f00;
}

Inheritance

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

p, ul, ol {
    /* styles here */
}

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.

.block {
    margin: 10px 5px;
    padding: 2px;
}
p {
    @extend .block; /* Inherit styles from ‘.block’ */
    border: 1px solid #EEE;
}
ul, ol {
    @extend .block; /* Inherit styles from ‘.block’ */
    color: #333;
    text-transform: uppercase;
}

Compiled CSS

.block, p, ul, ol {
    margin: 10px 5px;
    padding: 2px;
}
p {
    border: 1px solid #EEE;
}
ul, ol {
    color: #333;
    text-transform: uppercase;
}

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.

/* file.{type} */
body {
    background: #EEE;
}
@import “reset.css”;
@import “file.{type}”;
p {
    background: #0982C1;
}

Compiled CSS

@import “reset.css”;
body {
    background: #EEE;
}
p {
    background: #0982C1;
}

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.

lighten($color, 10%); /* returns a color 10% lighter than $color */
darken($color, 10%); // returns a color 10% darker than $color
saturate($color, 10%); // returns a color 10% more saturated than $color
desaturate($color, 10%); // returns a color 10% less saturated than $color
grayscale($color); // returns grayscale of $color
complement($color); // returns complement color of $color
invert($color); // returns inverted color of $color
mix($color1, $color2, 50%); // mix $color1 with $color2 with a weight of 50%

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:

$color: #0982C1;
h1 {
    background: $color;
    border: 3px solid darken($color, 50%);
}

Operations

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

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: 100px — 50px;
    left: 10 * 10;
}

Compiled CSS

body {
    margin: 7px;
    top: 150px;
    right: 50px;
    left: 100px;
}