Install and Update Sass on macOS Sierra and OSX 10.11 El Capitan

Install and Update Sass on macOS Sierra and OSX 10.11 El Capitan

xcode-select --install


Ruby comes bundled in OSX

ruby -v
Your output should be similar to

ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.4.0]
Install Sass

sudo gem install sass
Check Sass version

sass -v
Your output should be similar to

Sass 3.4.22 (Selective Steve)
 

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 on mac OS

To upgrade to the latest version of SASS, run

sudo gem update sass
If you have an older version which will not upgrade just follow the initial install instructions and the later version will be installed.