Sass is awesome

Posted on 19th August 2015

Recently, I started using Sass (the SCSS flavour). Now I simply cannot go back.

For the uninitiated, Sass is a CSS preprocessor. That means you write Sass code, and it "complies" into standard, old-fashioned CSS. If you would like an easy way to tryout Sass, I recommend Sassmeister. So what are some killer features of Sass?

Nesting

A straightforward yet powerful feature:

ul {
    list-style: none;
    li {
        float: right;
        a {
            display: inline-block;
        }
    }
}

Gets converted into:

ul {
  list-style: none;
}

ul li {
  float: right;
}

ul li a {
  display: inline-block;
}

Variables

That's right, you can have variables in Sass. This makes it really easy to change colours site-wide. Here is an awesome example of the power of Sass variables when it comes to colours:

$mycolor: #F5F5F5;

ul {
    background-color: $mycolor;
    li {
        background-color: darken($mycolor, 15%);
    }
}

Yup, we can darken, lighten, saturate etc. colours in Sass and refer to the variable! This gets converted into:

ul {
  background-color: #F5F5F5;
}

ul li {
  background-color: #cfcfcf;
}

And suppose we decide that blue is more our thing and set $mycolor: blue:

ul {
  background-color: blue;
}

ul li {
  background-color: #0000b3;
}

Nice automatic colour schemes.

Partials and imports

When I use @import in Sass, I usually use it with partials, that's why they are in the same category. Partials and imports allow your code to be organised into different files. A partial is defined by making the filename start with an underscore (_) and makes sure that Sass doesn't generate a standalone CSS file out of it. For example, if we had a file _vars.scss with the following contents:

$mycolor: orange;

And a base.scss file like this:

@import "vars"; // we drop the _ and .scss when @import-ing
ul {
    background-color: $mycolor;
}

It would be compiled into one nice ready to use CSS file.

Mixins

Mixins are an extremely useful feature that saves time and maintenance.

@mixin colors($color, $backgroundcolor, $bordercolor) {
    color: $color;
    background-color: $backgroundcolor;
    border: 1px solid $bordercolor;
}

ul {
    width: 100%;
    @include colors(green, orange, red);
    li {
        @include colors(blue, orange, green);
    }
}

Is converted into:

ul {
  width: 100%;
  color: green;
  background-color: orange;
  border: 1px solid red;
}

ul li {
  color: blue;
  background-color: orange;
  border: 1px solid green;
}

Of course mixins can be more simple and more complex than that and even include mixins inside them! If you were paying careful attention, you would notice that Sass also allows us to use // comment syntax for comments and are compiled out of the final CSS.

Conclusion

Sass is awesome. It provides amazing features that make your programming in CSS more enjoyable and maintainable. However, I would not recommend it to a complete CSS newbie. Learn CSS first, and enjoy the power of Sass later. You will find yourself actually using Sass better that way and appreciating its features. If you are interested in more features in Sass, I recommend you check out their documentation. Enjoy using Sass!