Getting started with SASS

Getting started with SASS
Published: by

For some website developers, no introduction to SASS is required. This post will show how to get started with SASS on a Raspberry Pi (Raspbian), a Windows PC or a Mac with your favourite IDE.

This is an ongoing post. Please suggest corrections, explanations, etc. in the comment section at the bottom of this page.

SASS (Syntactically Awesome Style Sheet) is an extension of CSS. It is a scripting language where variables, templates (mixins), mathematical functions and many other functionalities can be used before it is converted to CSS.

Not everyone is a fan of the SASS, but at least some of its negative connotations can be removed by having an easy set of installation instructions. On top of this, some guidelines on how to improve the CSS/SCSS workflow and some AUTO UPDATE functionality build into the development environment can be hugely beneficial.

See if SASS is already installed

SASS commands are entered from a command-line interface (CLI). For Windows users, this can either be done using the Windows Command Prompt or MSYS2 (installed with Ruby). For macOS and Raspberry Pi users, this is done using a terminal window.

To see if SASS is already installed on a system, the sass version command can be used:

sass -v

Installing Ruby on Windows

On Windows, SASS is installed as a Ruby gem. To install SASS, Ruby needs to be installed first. RubyInstaller is the easiest and most used Ruby environment on Windows.

RubyInstaller home page

After clicking the download button, the user will be given links for both the 32 and 64-bit versions. For those that want to, Ruby+Devkid can also be downloaded and installed.

For new users, keep all the default settings. During the RubyInstaller installation, the user will be also asked to Run ‘ridk install’ to setup MSYS2 and development toolchain. Keep this option selected.

After the initial Ruby installation, a terminal window will pop up asking to install additional components. Choose 1 to continue installing MSYS2.

RubyInstaller2

After both Ruby and MSYS2 have been installed, the RubyInstaller can be terminated/concluded by pressing the Enter key. Ruby and MSYS2 will now be featured in the Programs section of the Windows Control Panel.

(Ruby) SASS for Windows

After Ruby has been installed for Windows, SASS can either be installed using the MSYS2 terminal or the Windows Command Prompt using the following gem install command.

gem install sass

SASS for macOS

As with Windows, SASS is installed as a Ruby gem. Ruby comes pre-installed on macOS. To install SASS on macOS, the gem install command is used with sudo privileges:

sudo gem install sass

SASS for Raspbian (Debian)

For those using a Raspberry Pi as their development environment, SASS is available as an apt-get package. As with macOS, SASS is installed using sudo privileges:

sudo apt-get install sass

The SASS workflow

SASS is written as SASS language files with .scss (basically an S before CSS) as the extension. Although SASS is an extension of CSS, its output first needs to be compiled into ordinary CSS for web browsers to understand. Instead of writing CSS, the developer will write SCSS (in the .scss file) and do a compile to CSS (the .css file). Compiling is done using SASS terminal commands. The idea is to have both .css and .scss files in the same development environment, but only point the browser to the CSS file(s).

If the terminal cursor is in the same directory as the.scss and .css files, the most basic form of the SASS command will look as follows:

sass example.scss:output.css

If output.css does not already exist, it will be created. Note the colon (‘:’) between the .scss and the .css files. This command tells SASS to compile example.scss to output.css.

The SASS command can be extended to include relative directories too. This will significantly improve the organisation of a project. If the SASS command is executed from the same directory the SCSS and CSS directories are situated, it will look as follows:

sass scss/example.scss:css/output.css

In this example,example.scss is situated in the SCSS directory and output.css in the CSS directory.

In order to prevent having to repeat the SASS command over and over, the SASS watch flag can be used:

sass -- watch scss/example.scss:css/output.css

With this command, SASS will watch the example.scss file for saved updates and automatically update the output.css file.

About the author
Renier busies himself with improving his English writing, creative web design and his websites, photoshopping, micro-electronics, multiple genres of music, superhero movies and badass series.
Behind the Scenes is a free, informative website. If you find value in any of our content, please consider making a donation to our cause.
Donate via PayPal

Save, share & Disqus

Use the buttons below, on the left or the bottom of this page to share this post. Your comment is important, but don't be a knob. Keep it constructive and polite.

Comment via Disqus

Disqus is a worldwide comment hosting service for web sites and online communities. This secure platform ensures a pleasant commenting environment which is manageable from one account. Use the Login button to sign up.