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.
Table of Contents
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:
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.
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
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
.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
.css files, the most basic form of the SASS command will look as follows:
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
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:
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