Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 4th, 2016
CSS Preprocessors: the differences

We have all heard of Sass, Less and Stylus. While they all share a common task — improving CSS — there are some subtle differences between the two. Which CSS preprocessor is used most today and why?

About preprocessors

The word preprocessor is self-defined. A preprocessor will, before runtime, go through your code and analyse it, as well as modify it. As such, preprocessors mostly add syntactic sugar to the source code, although they are mainly used for the special behaviour they add.
Stylesheets in all three languages will first have to be transpiled, before being readable to a browser. A transpiler is nothing more than an advanced application that is able to translate source code of one development language into another.
Thanks to the transpilation process, many stylesheets become more cross-browser compatible as well. While newer CSS rules may not work in all browsers (cough, Internet Explorer), good CSS preprocessors will analyse the code and possibly elect to use older CSS rules that are cross-browser compatible.

CSS preprocessors will save you a lot of time; they allow for very DRY code. Code written in one of the three major CSS preprocessors is more maintainable, allows for faster development and will also considerably speed up the overall development process, as syntax errors can be caught by the transpiler — and let’s be honest; what would you rather see, an error message or a web page that is styled incorrectly, leaving the job of finding the erroneous code to you?

So now that everyone is up to date with what a CSS preprocessor is and how it works, let’s talk about three widely used variants today.

Sass / SCSS

Probably the most widely used CSS preprocessor in use today. The major difference with the other two, LESS and Stylus, is that Sass has two syntaxes. It has one indentation-delimited syntax which omits curly braces and semicolons and one syntax which preserves all rules set by CSS and simply adds its own features. This gives the SCSS syntax a slight edge: all correct CSS code is valid SCSS as well.

/* SCSS syntax */
.foo {
    height: 10%;
    position: fixed;
    border: 1px solid #FF0000;
}
/* Sass syntax */
.foo
    height: 10%
    position: fixed
    border: 1px solid #FF0000

The Sass syntax offers an arguably cleaner syntax. Like Python, it is an indentation-delimited syntax. No curly braces or semicolons are necessary. This does mean that all rules must appear on their own line — there is no way to beautify your code manually, as the formatting of your code could potentially break it.
While the two are syntactically different, the additional features added by Sass are present and identical in both styles. Let’s take a look at some. Note: all code shall be written using the SCSS syntax in this blog. Feel free to use the Sass syntax; it won’t break your code.

Variables

Sass allows you to declare variables that can be re-used later. This makes the code incredibly DRY and thus maintainable. Let’s take the following code snippet:

$main-colour: blue;
$std-margin: 10px;
$std-padding: 12px;


.foo {
    color: $main-colour;
    margin: $std-margin;
    padding: $std-padding;
}
Arithmetic

Not only does Sass allow variables to be declared within the code, arithmetic can be used on them ass well. Some maths will always be useful, so let’s illustrate this using the above piece of code, but using the arithmetic operators as well.

$main-colour: blue;
$std-margin: 10px;
$std-padding: 12px;

.foo {
    color: $main-colour + #FF0000;
    margin: $std-margin - 3px;
    padding: $std-padding + 3%;
}
Nesting

Never repeat yourself again. While logical nesting is already present in CSS, Sass allows you to nest code blocks, making it immediately clear what is going on. No longer write multiple blocks that could in fact be one.

$main-color: blue;
$std-margin: 10px;

.foo {
    color: $main-colour;
    margin: $std-margin;
    a {
        color: green;
    }
}

The resulting CSS after transpilation of the above code snippet would be

.foo {
    color: blue;
    margin: 10px;
}

.foo a {
    color: green;
}

Since we are applying style to an anchor element, it makes sense to declare this within one code block. Sass allows us to do so.

Mixins

Mixins make up an important part of Sass. They allow inclusion of sometimes rather large pieces of code. If we have standards set for border, colour, margin and padding, it would make sense to have these inside one code block that could be included in multiple places. This is exactly what a mixin allows us to do.

@mixin standards {
    color: blue;
    border: 1px dotted black;
    margin: 10px;
    padding: 12px;
}

.foo {
    @include standards;
}

For those familiar with Javascript (or basically any other programming/scripting language for that matter), will understand the power of passing parameters into mixins as well. Logical blocks can be used to give a mixin slightly different behaviour every time it is included. Take a look at the following code:

$main-colour: blue;
$std-margin: 10px;
$std-padding: 12px
@mixin defaults($colour, $border, $margin, $padding) {
    color: $colour;
    border: $border;
    margin: $margin;
    padding: $padding;
}

.foo {
    @include defaults($main-colour, 1px solid black, $std-margin, $std-padding);
}

Our code is already getting extremely concise – since this piece of code can be included in many different places, we end up writing much less code. To change multiple parts of your website, all you need to do is edit the one mixin and all code including it will change automatically.
Sass offers many, many more features, but to keep the size of this post below, say, one gigabyte, we must continue with another popular CSS preprocessor.

LESS

Less, which stands for Lean CSS, is similar to Sass. It supports variables (albeit prepended with an at-sign (‘@’) for a sigil rather than the dollar sign (‘$’). LESS also supports logical nesting the way Sass does, so let’s not get into those. Instead, we should focus on the features that LESS has which Sass does not.

Guarded mixins

While guarded mixins are certainly possible using conditional (if/else) statements, a guarded mixin can sometimes prove to be very useful. It is simply a mixin that will only be used if a certain condition is true.

.set-width(@width) when (@width < 20px) {
    width: @width;
}

.foo {
    .set-width(23px);
}

The above code will never run, because the condition applied to the mixin was not met.

Namespaces

Anyone that has worked with full programming languages will know what these are. Namespaces are used to group certain functionality together. You wouldn’t want all your files inside the root directory on your PC either, so you use folders to nicely organise your data.
The same applies to programming languages: instead of having your classes inside a global namespace, you subdivide the project into logical parts.
LESS brings this concept to the world of styling. It is possible to have multiple mixins with the same name; there will not be any confusion, because if you use the full qualified name (that is, including the namespace the mixin resides in).

#foo {
    .set-width(@width) when (@width >= 10px) {
        width: @width;
    }
}

#bar {
    .set-width(@width) {
        width: @width;
    }
}

.baz {
    #foo > .set-width(12px);
}

.qux {
    #bar > .set-width(8px);
}

While both mixins are called set-width, they have different behaviour; one is guarded, the other is not. There is no confusion between the two, since they were declared in different namespaces. The concept of namespacing is almost necessary in bigger projects.
Since SASS and LESS are very similar, let’s take a look at the last of the three preprocessors, which is clearly the odd one out in this list.

Stylus

Stylus has a very unique syntax. It is, like the older syntax of Sass, whitespace-sensitive. Curly braces and semicolons can freely be omitted as well. Stylus, however, goes as far as allowing you to drop the colon as well:

.foo
    width 10px
    margin 5%
    color red
    border 1px solid black
Require

Rather than using @import in your stylesheets, Stylus supports the @require instruction as well. For those familiar with PHP, this is the same as include_once. It will import the input stylesheet, but ensure that it is only imported once in the project. This can prevent serious issues.

Clean mixins

Stylus arguably provides the cleanest looking mixins out of the three. Since parameters don’t have to appear between brackets, they can look exactly like normal CSS rules (transparent mixins).

some-awesome-mixin(pixels)
    margin pixels
    padding pixels

.foo
    color green
    some-awesome-mixin 15px

Preference?

This wouldn’t be a proper personal blog post if I didn’t end this with my personal preference. The clear winner is Sass (SCSS to be precise).
Stylus offers a great toolkit, but its syntax is whitespace-sensitive, which is something I have a limitless hatred towards. I prefer free-form languages; these are development languages in which formatting is insignificant and tokens are used for delimiters. In CSS, these would be colons, semicolons and curly braces; the positioning of the code itself is completely insignificant and could be placed on one line, if one wanted to.
LESS seems sloppy because it doesn’t support @if and @else.

Sass is the CSS preprocessor that I am most familiar with and one that I enjoy working with… a lot.

Posted by Luke van Kampen

Leave a Reply

Your email address will not be published. Required fields are marked *