This is going to be the start of a small series of blog posts. I am not spoiling too much of the end result, but it has something to do with the special seasons of the year. The idea to this series is based on the wish for a blog posts by a very good friend. And I wanted to take the chance to introduce you into SASS. So before get to the actual code, let's start with the basics.

Installing SASS

SASS is an acronym for "Syntactically Awesome Style Sheets". You could see it was "coding in CSS". To use SASS, you write code which will then be compiled into normal CSS. To compile it, you have different options.

Using the official ruby gem

SASS was originally written in ruby. So to get started with this version, you have to install ruby first. On Windows, the easiest way it to use the RubyInstaller. On Mac you might want to you Homebrew with the following command:

brew install ruby

If you are on linux, your package manager most likely has a ruby package available. I would suggest to use ruby 2.2 and newer, but an older version might also work.

To install SASS, you simply have to install the ruby gem (the SASS "package" for ruby) with the this command:

gem install ruby

Now you should be able to run the ruby command in your terminal.

Using grunt

If you are familiar with grunt, you can also install a SASS package and use this to compile your files. It comes in two flavors. One package is using ruby while the other one is using libsass, a JavaScript implementation of SASS. For the ruby package, install this package:

npm install grunt-contrib-sass --save-dev

For the libsass version, which lacks some features of the ruby variant, use this package:

npm install grunt-sass --save-dev

Using gulp

If you preferred task runner is gulp, things a very similar to the grunt setup. For the libsass version, use this package:

npm install gulp-sass --save-dev

There is also a ruby version, but I am not sure if it's still actively maintained:

npm install --save-dev gulp-ruby-sass

Compiling SASS

Once you have SASS installed, you can compile a SASS file to normal CSS with this command:

sass style.scss style.css

This example is using the alternative SCSS syntax, which is more popular, as it is quite similar to CSS. This command will compile the file only once. As you don't want to run this command after every change you've made to a file, simply run the "watcher" which will compile the SCSS file on every detected change (usually when saved):

sass --watch style.scss:style.css

For more options, take a look a the official documentation.

Conclusion

You should now be able to use SASS to improve your CSS development process. In the next blog post I will show you how to integrate SASS into PhpStorm, an IDE many developers are using nowadays.