3 Reasons to Start using Sass Today

Sass is great! So I thought I would write a few brief reasons why you should start using Sass today (if you’re not already – in which good on you!). For those of you who haven’t heard of Sass, it’s a CSS preprocessor. This means that as you write your CSS it gets processed and converted into standard CSS. This means that all the work is done before reaching the browser, so you don’t need any special libraries or extra JavaScript to use it.

To get Sass installed and working you’ll need Ruby, but it will work across the board on Windows, Linux and OS X.

Here are some reasons you should use Sass:

1) Nesting#

Nesting allows you to place blocks of properties within one another indicating that they’re a child of the element. This means that the Sass code header { h1 { // Something } } would become header {} header h1 {} within CSS.

Another Example of this:

CSS

h1,
h2,
h3 {
    font-size: 3em;
}

h1:hover,
h2:hover,
h3:hover {
    color: red;
}

Sass

h1,
h2,
h3 {
    font-size: 3em;

    &:hover {
        color: red;
    }
}

This essentially that code it both easier to write, because there is less to write, and it is more maintainable, due to less duplication and lines of code.

2) Mixins#

Mixins are the equivalent of functions in the software world. The are re-useable snippets of code which can be called through out your code to carry out certain functions. Some developers writing in Sass can get quite attached to their mixins, making complex jobs simple.

Mixins can also be used just as a way of removing duplicate code, for example, we’re all probably quite used to this sight:

CSS

div {
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px;   
    border-radius: 12px; 
}

Sass

div {
    @include BorderRadius(12px);
}

@mixin BorderRadius($size: 6px) {
    -webkit-border-radius: $size; 
    -moz-border-radius: $size;   
    border-radius: $size; 
}

3) Minification#

Not necessarily part of the Sass language, but this feature can make light work of any minification need before release – reducing file sizes dramatically. If you’re new to minfication, it strips out comments and whitespace from your CSS and bundles it onto a single line — which reduces readability (so don’t do it to your development code) but can reduce your CSS file size by up to 50%.

When you run your Sass watch command, adding on the style parameter allows you to automatically compress/minify it, like so:

$ sass --watch css/main.scss:style.css --style compressed

WARNING! With great power comes great responsibility#

This is mainly aimed at nesting and mixins, some people don’t like Sass because they say that it adds unnecessary duplication within your code. By nesting too many levels deep the CSS property can become very (along too) specific.

However, Sass doesn’t create bad code. Bad coders do.

Some Great Places to Start#

• The Sass Way
• CSS-tricks Sass Style Guide

Use Sass? Have some great mixins? Let us know in the comments below?