If you have heard of people talking about SASS but you still don't quite get what it is, then this tutorial for you.  In this guide, I will give you a quick overview of what SASS is, how it works, why it's used and what features are included with it.

So.. What Is SASS?

SASS is an extension of CSS that was originally designed to overcome some of the limitations of CSS.  Back in the day, when designers just had CSS, working on giant monolithic CSS files in huge projects wasn't fun and life got very messy.  Updating and maintaining websites when you're just working in a single file becomes a nightmare over time.  Changing the colour palette for example, throughout a project involved a lot of find and replace and crossed fingers that typos didn't exist.

SASS does not fundamentally change how CSS works.  When you write your styles, you still use CSS as you always have and the end result will still be a CSS file.  The reason why you would use SASS is that SASS provides a set of handy features that make using CSS a lot easier.

SASS provides features like:

  • Importing files: In SASS you can import as many other SASS files as you like.  This means you can create a SASS file per page, per component, or, generally however you want to.  All these SASS files end up being compiled into a single CSS file.  Splitting your CSS up makes maintenance a lot easier.
  • Variables:  SASS  allows for defining things like colours and font-size in variables which can be re-used to prevent duplication and improve maintenance. 
  • Nesting: Instead of having to constantly write out the full CSS selector path on each style, you can use nesting to make your SASS more readable and reduce the amount of typos.
  • Operators: For mathematical operations, like less than, greater than
  • Mixins and functions: To create re-usable functions

How Does SASS Work?

SASS is a CSS preprocessor.  What this means is that you write your CSS in a file with a SASS extension.  You use a SASS pre-compiler to compile your SASS file into a normal regular CSS file.  The output is a normal CSS file. In your website, you will link to this CSS file so the website will not know the difference between CSS written in the traditional way and CSS that has been compiled in SASS.

SASS is not the only CSS processor, other popular pre-processors include LESS and stylus.  SASS can be used in two different syntaxes, SASS and SCSS.  If you come across either of these acronyms then they are still using SASS, it's just that the layout and the filename extensions will be slightly different.

How Do I Get Started With SASS?

As SASS is a pre-processor you will need a tool that will compile your SASS into CSS.  There are many tools available for free that you can use depending on what operating system you are working on, the size of the team you are working with and your preferences.

In general, you will need to install NPM and node.js to use SASS.   NPM is a package manager that gives you access to a huge library in re-usable components.  I won't go into all the different permutations of using SASS in this tutorial as that's its own subject.  If you want a MAC and just want a way to get up and running then I suggest you look into node-sass though :)