You should always be SASSy!

Everybody who ventured into the wondrous world of web development probably used CSS at least occasionally. Unfortunately they soon found out that sometimes it isn’t all that wondrous: CSS files tend to grow into a big ball of mud and become notoriously difficult to maintain. Luckily CSS pre-processors such as SASS, LESS and Stylus are able to alleviate some of the pain points by adding handy new features to help the developer while ultimately ‘compiling’ into plain old CSS.

Speaking of plain old CSS, a large portion of web developers have never used a CSS pre-processor, even though there is no real reason not to:

• It’s 100% free
• It’s incredibly easy to set-up and use
• It’s worth it, even if you only use a single feature
• But there are a lot of cool features

From here on forward all argumentation and examples will be referencing SASS, though the same arguments can be made for LESS, Stylus and other pre-processors as well.

It’s 100% free
Both writing and compiling SCSS (the CSS language of SASS) is free. And because it compiles to vanilla CSS using the compiled style sheets is just as free and compatible as using any other CSS style sheet.

It’s incredibly easy to set-up and use
In the early days of SASS you still had to download and extract a SASS compiler and compiling SCSS to CSS required a command line operation. Since then many tools and plugins were developed removing these hurdles so you can spend more time on the fun stuff and LESS time (pun intended) on setup and compiling.

One such tool is the Web Compiler extension for visual studio written by Mads Kristensen which allows you to compile and minify SCSS files with a single click. Once set-up the plugin will continuously monitor these files, recompiling each time you update the source SCSS files. No additional clicks or effort needed!

Performing this action for the first time will add a ‘compilerconfig.json’ file to your project where you can change the output file location, though this step is entirely optional.

It’s worth it, even if you only use a single feature
Probably the simplest yet most powerful feature of SASS is the ability to use variables, these work just like the variables we all know and love from scripting/programming languages, allowing you to declare a variable once and use it in different locations.

SCSS SYNTAX

When the Sass is processed, it takes the values we defined for the $blue and $margin variables and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

CSS SYNTAX

But there are a lot of cool features
Variables are very powerful however they are but one of many things SASS can do for you. Other features include rule inheritance/extension, importing ‘partial’ scss files and using mixins to automatically generate vendor specific prefixes. For a comprehensive overview of all capabilities please consult the SASS website.

So if you haven’t already: do yourself a favor and try out a CSS pre-processor, it is guaranteed to save you time, effort and the occasional headache!

–

–