Getting Started with CSS Preprocessors (Less and Sass)

What are CSS preprocessors?

CSS is the language used to make the web beautiful. Preprocessors can be used to help make CSS more beautiful.

CSS preprocessors extend the basic functionalities, overcoming many limitations of traditional CSS by adding features such as variables, nesting selectors and mixins, creating CSS that is more maintainable and efficient.

CSS written in a preprocessed language must also be converted or compiled into traditional CSS syntax. There are many apps that can be used to do this and will be discussed further in this article.

Why make CSS more complicated?

I have to admit, I resisted at first as well. I didn’t want to make CSS more complicated. However, once you get up and running, it’ll be hard to go back to writing regular CSS. The great thing about preprocessors is you can use as little or as many features that you want. So the learning curve is only as steep as you want it to be.

Getting started with even just the basic features will greatly improve your workflow.

There is one thing I’d like to point out. If you are a CSS newbie, it might make more sense to get more comfortable with CSS and best practices first before diving into using preprocessors. A tip for anybody starting out with preprocessors is to look at the CSS that is being compiled to make sure you are still following best practices.

Which one should I choose?

There are three popular preprocessors to choose from: Sass, Less, Stylus.

Ask any web developer and you’ll hear passionate arguments as to which one is better but at the end of the day, it’s a personal choice. My advice is try a couple and figure out which one you works for you. Each tool may have specific features that the others don’t have but the basics and syntax is similar making it easier to learn the others once you have one under your belt.

Personally, I started with Less because I found the documentation easier to read and am now using Sass, mostly because a project I was working on was already using Sass and now I just prefer it!

This article will go over the basics of getting up and running with Sass or Less (sorry Stylus, maybe next time).

Getting started with Less or Sass

Both Less and Sass are backwards compatible so you can easily convert your existing CSS files into Less or Sass just by renaming the .css file extension to .less or .scss, respectively.

Less is JavaScript based and Sass is Ruby based but you don’t have to know anything about either language or use the command line to compile the files into CSS. There are various apps, free and paid, that will take care of that for you! Here’s a list for Less and for Sass.

These apps will watch your files for changes and automatically compile your updates into new CSS files. So remember, when using a preprocessor, you’ll never have to touch your .css files again!

Note that you only need to link the .css files to your HTML pages, not the .scss or .less files. Those are strictly for development.

Comments

You can use two kinds of comment styles in your Sass or Less files. The traditional CSS style, /*comment*/ and also the double forward slash style // comment works as well. What’s the difference? The latter does not compile into the .css file.

Variables

Variables are a great way to get up and running with preprocessors. Ever had a project with multiple colors? Which is easier to remember, darkblue or #00008B? With variables, you can assign values to a name, then use the variable name in your CSS.

Note that variables can only be defined once so be careful when choosing names. Also, using functional naming conventions versus style naming conventions can be useful as well.

Variables must be declared first, so it loads first and the CSS that comes after it can reference it.

Less

Use the @ symbol to define a variable.

    @darkblue: #00008B;
    @border-color: #CCCCCC; //gray
    @base-font-size: 16px;

    body {
        font-size: @base-font-size;
    }
    header {
      border-bottom: 1px solid @border-color;
    }
    a {
      color: @darkblue;
    }

Sass

Use the $ symbol to define a variable.

    $darkblue: #00008B;
    $border-color: #CCCCCC; //gray
    $base-font-size: 16px;

    body {
        font-size: $base-font-size;
    }
    header {
      border-bottom: 1px solid $border-color;
    }
    a {
      color: $darkblue;
    }

Both will compile to:

    body {
        font-size: 16px;
    }
    header {
      border-bottom: 1px solid #CCCCCC;
    }
    a {
      color: #00008B;
    }

Making changes is also easier when using variables. For example, if you decide to use a different dark blue color after you’ve already declared it throughout your CSS file, all you have to do is change the value of the darkblue variable and it will update wherever the variable was used, when the CSS file is re-compiled.

Note that the variable declarations itself don’t get compiled. Only traditional CSS declarations are compiled.

Nesting selectors

Nesting selectors keeps the stylesheet organized by grouping related CSS in chunks. The syntax is the same for both Less and Sass.

    header {
        color: black;

        .logo {
            width: 300px;
        }
        .navigation {
            font-size: 12px;
        }
    }

Compiles to:

    header {
        color: black;
    }
    header .logo {
        width: 300px;
    }
    header .navigation {
        font-size: 12px;
    }

Nesting is also useful for making easy changes as well. Let’s say you decided to use a class of header instead of selecting the header element. In the traditional CSS example, you would have to update all three declaration blocks. When using a preprocessor, you only have to edit it once!

Remember to stick to best practices when nesting selectors. With preprocessors it tempting to nest everything but avoid going more than three levels deep!

    nav {
        ul.main-nav {
            li {
                a {
                    //too many levels!
                }
            }
        }
    }

Compiles to:

    nav ul.main-nav li a {
        // too many levels!
    }

Mixins

Mixins are a great way to create reusable chunks of CSS. Unlike variables, which only hold one value, mixins can hold multiple CSS declarations, as many as you need.

Let’s say you want to create a base button style where the buttons will always have the same border style and rounded corners.

In Less, mixins are created just like a class declaration block. This means any class can be used as a mixin. Just like variables, declare the mixin first before using it. To use the mixin, include it by its name.

Less mixin

    .rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }

    .button-green {
        .rounded-border;
        background: green;
    }

Compiles to:

    .rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }
    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

Since the syntax is the same as using a class as your selector, the mixin will be compiled. If you want to create a mixin that will only be compiled when used, add a set of parentheses () to the mixin name.

    .rounded-border() {
        border-radius: 2px;
        border: 1px solid #ccc;
    }

    .button-green {
        .rounded-border();
        background: green;
    }

This will compile to just this:

    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

Sass Mixin

Let’s use the same example to demonstrate the Sass syntax. Sass requires a @mixin directive, followed by the mixin name as well as @include to use the mixin.

    @mixin rounded-border {
        border-radius: 2px;
        border: 1px solid #ccc;
    }

    .button-green {
        @include rounded-border;
        background: green;
    }

Will compile to this:

    .button-green {
        border-radius: 2px;
        border: 1px solid #ccc;
        background: green;
    }

Mixins and Parameters

To make your mixins even more flexible and reusable, use parameters. Suppose you wanted to create a square, but use different sizes and different border colors. The variable values can be added to the mixin, between the parentheses, as parameters. Then add the variable name to the corresponding property value. Mixins can have one or more parameters, separated by a comma.

In the below example, size represents height and width, and color represents border color.

Less

    square(@size, @color){
      width: @size;
      height: @size;
      border: 1px solid @color;
    }

    .box1 {
      .square(50px, #ccc);
    }
    .box2 {
      .square(100px, #ddd);
    }

Sass

    @mixin square($size, $color){
        width: $size;
        height: $size;
        border: 1px solid $color;
    }
    .box1 {
        @include square(50px, #ccc);
    }
    .box2 {
        @include square(100px, #ddd);
    }

Both will compile to:

    .box1 {
        width: 50px;
        height: 50px;
        border: 1px solid #cccccc;
    }
    .box2 {
        width: 100px;
        height: 100px;
        border: 1px solid #dddddd;
    }

There are many more features available and documented on both the Less and Sass sites. However, getting started with nesting, variables and incorporating mixins is a great way to start supercharging your CSS workflow. Stay tuned for part two of this series.