Up and running with installing Sass on macOS

Up and running with installing Sass on macOS Big Sur or earlier 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 macOS or Linux is easy as it comes bundled with the OS, on Windows you need to install Ruby separately.

Ruby comes bundled in macOS

ruby -v

Your output should be similar to

ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin20]

Install Sass

sudo gem install sass

Check Sass version

sass -v

Your output should be similar to

Ruby Sass 3.7.4

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.