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.
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.
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
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
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.
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.