CSS on Steroids - Introduction to LESS/SASS

HTML, CSS and Javascript are often called the assembler of the today’s web. They are as comfortable as the old buddy and maintaining large applications written in these plain languages requires a lot of discipline and mental strength. To make our life easier there are many frameworks and templating systems like jQuery, Twitter Bootstrap, modernizr.js and others.

LESS and SASS are CSS preprocessors. They add new functionality to help you maintain your CSS files. You write a simple code that is similar to plain CSS with some extra language constructions, compile it and the result of the compilation is a new CSS file. The added functionality is so fundamental that it should be a part of the CSS3 specification but unfortunately it isn’t.

The difference between LESS and SASS

Both of them are supersets of CSS. Compilation is done during development with special preprocessor or you can use just in time compilation on the client’s browser with javascript. You can use bundling and minification.

LESS is more declarative and is more similar to CSS. It has less features than SASS but is older and more widespread. It has native support in Visual Studio 2012 with web extension tools.

SASS on the other hand is more like a programming language. Older version uses significant whitespace syntax but you can use curly braces with the latest one. There is no native support for SASS in Visual Studio and you have to download a plugin.

You can say that LESS uses @ and has a little less features. SASS uses $ and it can do everything that LESS can and adds some extra features. Therefore I will continue with SASS.

What can LESS and SASS do?

Nested rules,
inheritance,
mixins,
variables,
conditional statements,
and special functions (for numeric operation, colors).

Nested Rules

table.form {
    width: 200%
    th {
        text-align: left;
        ....
    }
    td {
        background-color: 
        ....
    }
}

It compiles to

table.form { ...}
table.form th { ...}
table.form td { ...}

For performance reasons it is better not to nest too much.

You can have a link to the parent with the special symbol &. It is useful for hyperlinks and pseudo selectors.

a {
    text-decoration: none;
 
    &:link { color: ...}
    &:visited { ...}
    &:hover {...}
}

You can also use the difference between selectors. p { .important ... } compiles to p .important { ... } and is used for every element in p with class important and p { $.important ... } compiles to p.important { ... } and is used to style every p element with important class. Please notice the space in the compiled rule.

You use SASS for group related rules. This is useful especially for things like background-something or font-something.

h1 {
    font: {
        family: ...
        size: ...
        weight: ...
    }
}

Variables

They are used more like constants than variables and in LESS they are really just constants. You can define variable $variableName: value; and then use it $variableName. Variables can be also used in the name of the property.

You can do operations with variables.

$Width : 960px;  
header {
    width: $Width - 20;
}

You can apply functions for colors like

lighten,
darken,
saturate,
desaturate,
invert.

These functions are available also for values. SASS supports multiple color modes - rgb, rgba, hsl, hsla.

tr:nth-child(even) th { background-color: lighten($myColor, 20 }
tr:nth-child(odd) th { background-color: lighten($myColor, 30) }

You can use include to seperate your variable definition and usage into multiple files with the keyword @import "filename";.

Conditions and Loops

Typical usage for conditions and loops is for defining header styles.

@for $i from 1 through 4 {
     h#{$i} {
         @if $i==1 {
             color: #f00;
         } @else {
             color: #c00
         }
        font: {
            size: 100% + (4 - $i) * 40;
        }
     }
}

Mixins

Mixins are parametrized set of rules. They can be inserted to a definition.

/* 1ex is the default value */
@mixin RightFloat($margin: 1ex) {
    float: right;
    margin-left: $margin;
}

img.aside {
    @include RightFloat;
    border: none;
}

.box {
    @include RightFloat(2ex);
}

Inheritance

This feature is very useful when you define tables.

td {
    ...
}
th {
    @extend td;
    color: red;
}

The result is optimized CSS with constructions td, th { ... } and th { color: red; }.

Conclusion

LESS and SASS preprocessors give you core functionality for creating maintainable style sheets. They are very important for large web applications but also very handy for the small ones. Both of them are not dependant on your technology stack so you can use them with ruby, Java, .NET or any other platform. If you are experienced with CSS once you get these simple principles written above you become LESS/SASS fluent.