Up and running with installing Sass on OSX

SASS  (Syntactically Awesome Stylesheets) is a CSS pre-processor tool in which you write your CSS code using variables, selector inheritance, mixins, and nestings and  and then compile that code to spit out regular CSS. The benefits of SASS are more advantageous in a mid-large web development project with multi user input, it manages the code base by enabling the code structure to modular and tidy with reusable elements.

Working in SASS helps to make the code updating process easier as when you need to change the CSS code you just change your initial variables which in turn then change every instance of that variable in the entire CSS. Not only that, but the initial coding in SASS is quicker like a shorthand version which when output to regular CSS outputs the longhand version.

You code to a .scss format first and then compile to a regular .css file, here is an introductory guide to working with SASS.

SASS runs on the programming language Ruby, which on modern versions of OSX or Linux is easy as it comes bundled with the OS, on Windows you need to install Ruby separately.

Check if you have Ruby

ruby -v

Your output should be similar to

ruby 1.8.7 (2012-02-08 patchlevel 358) [universal-darwin12.0]

If you need the latest Ruby version or are getting Ruby errors you can install the latest version.

Install SASS

sudo gem install sass

Check SASS version

sass -v

Your output should be similar to

Sass 3.2.12 (Media Mark)

Dependency

Add in a dependency package for converting files to CSS when watching a directory – explained further down…

gem install --version '~> 0.9' rb-fsevent

Compiling SASS to CSS

To compile a .scss file into a regular .css file there are 2 ways, static or dynamic:

Static

Single file

sass --update cssfilename.scss

or directory containing multiple files:

sass --update /directory/

Which will produce your new cssfilename.css file.

Dynamic

This will watch a file or directory and as long as the command is running in the Terminal will automatically save to the .css files as soon as you save the .scss files.
This operation needed the dependency from earlier.

Watch a single file

sass --watch sass cssfilename.scss
>>> Sass is watching for changes. Press Ctrl-C to stop.

or directory containing multiple files:

sass --watch /directory/
>>> Sass is watching for changes. Press Ctrl-C to stop.

When you are finished editing the .scss files cancel the Terminal command by hitting ‘control’+’c’.

Updating SASS

To upgrade to the latest version of SASS, run

sudo gem update sass