Getting started with SASS

Syntactically Awesome Style Sheets

SASS is a CSS preprocessor that enables the user to be able to write tidier and more readable CSS. By indenting and embedding selectors it allows a visible hierarchy of parent and child selectors in the stylesheet.

How it works

After installing Sass you can write your CSS in the Sass format, in a file with the extension .scss. Sass will compile this file either automatically(this needs to be setup) by the user running a command. Once Sass has compiled the code it will create a new .css file (I like to have this file in another folder if there are multiple stylesheets). This would be the stylesheet you would reference in in your HTML and would look like original CSS but possibly a little messier. Going forward, you can continue to update the .scss file with new CSS and SASS will process it to update the .css file.

Lets take a look…

Here’s an example of some CSS:

.container {
   ...
}

.container .heading {
   ...
}

.container .heading p {
   ...
}

.container .block {
   ...
}

Here’s the same code using Sass format:

.container {
   ...

   .heading {
      ...

      p {
         ...
      }
   }

   .block {
      ...
   }
}

Installing SASS

If you have windows you would need to install Ruby, which can be done by using the Ruby Installer. You can install Sass using your command line. On a Mac you can access this with the application ‘Terminal.app’, which is located in the ‘Utilities’ folder. On Windows you can search for and open ‘cmd’.

In your command line run:

gem install sass

This will install the Sass package and anything else you might need for it. If you get an error you can try using the code below:

sudo gem install sass

To check if it has installed properly you can run:

sass -v

Getting started

When making your SASS files you create a stylesheet with the extension .scss. Once you have some CSS in that file in the Sass format you use command line to produce a compiled, original format, version of your CSS in a .css file.

You can do this by using:

sass input.scss output.css

This will take your “input.scss” file and create a new css file “output.css”.  To make the Sass compile your stylesheets automatically whenever you make a change to a file you can use:

sass --watch input.scss:output.css

If you have multiple Sass files it might be better to compile the whole folder using this:

sass --watch stylesheets/input:stylesheets/output

References:
https://scotch.io/tutorials/getting-started-with-sass
http://www.hongkiat.com/blog/getting-started-saas/
http://sass-lang.com/