Getting sassy with CSS

Self-initiated Project

Tuesday, Mar 13th 2018

Aims and objectives

For this self-initiated project, the aim was to learn how to use Sass and apply the techniques learnt to my portfolio. The main objectives were to:

  • Learn the best practices for Sass
  • Rebuild my portfolio CSS with the SCSS syntax
  • Make all the Sass files efficient and readable

Can I not stick to good ol' CSS?

In theory, you can survive on just CSS, but Sass broadens the horizon for productivity since it's an extension to CSS, where you can use features plain CSS won't support. Some of the features you can use in Sass include variables, nested rules, mixins and inheritance. Sass allows you to keep large CSS files organised, making it easier to adapt the CSS.

xkcd comic, computer complaining about compiling with an error in the code
xkcd #371: Compiler Complaint

Since Sass is a CSS pre-processor, you don't actually use the files for your website, you would run a command to compile the Sass file into standard a CSS file, where you would use this for your website. This allows you to have a super clean and organised Sass file where you can easily make changes to the code and a standard CSS file that browsers will understand.

So, what's the set-up?

To start off this project, I had to install Sass and from here I was faced with two options, download an application or use a command line interface. I chose to use the CLI because I wanted to get used to the commands. To execute the Sass commands, I used Terminal on Mac and Git Bash on Windows and to develop my Sass files, I used the latest version of Adobe Dreamweaver CC alongside Git to keep a track of all my changes.

Evidence please

Here are the links to all my pens:

Ok how did you learn it then?

I started off by watching a complete tutorial from, where the course I watched was Sass Essential Training by Ray Villalobos. To further increase my skills, I watched some videos from the YouTube playlist Sass Tutorials by LevelUpTuts. And finally, I looked at the official documentation for Sass to learn more about the various features and how to use them.

Walk me though the key features


Variables in Sass have the same functionally of those in other programming languages, you start by defining it and then you can call it. To define a variable in Sass, you start with a dollar sign followed by the name, and then you give it a value. It's best to place the global variables at the top of a Sass file as it allows you update them easily.

See the Pen Sass Variables by Umesh Patel (@s00pGuY) on CodePen.


Nesting works by allowing you to nest rules within other rules, so the inner rules are applied to the outer rule's selector. This is good because it allows you to keep all your rules in one place, rather than having it under one another. According to a guide by Chris Coyier, it is best practice to have a maximum of 3 levels when nesting before things begin to get difficult to understand.

See the Pen Sass Nesting by Umesh Patel (@s00pGuY) on CodePen.


Partials are Sass files that are imported into the main Sass file. The concept behind partials is that you can break down sections of code or pages into separate files to make them easier to maintain. Partials are named with an underscore at the start, so Sass knows not to compile it into separate CSS files. The structure I like to follow is similar to one from the SMACSS guidelines, where you import the base rules and then the modules. If you would like to read more on partials, I recommend this blog by Sarah Chima.

See the Pen Sass Partials by Umesh Patel (@s00pGuY) on CodePen.


Mixins are similar to JavaScript functions where you can define a set of styles that can be reused throughout the stylesheet, plus it can also take along arguments. It is perfect for duplicates or similar blocks of code, as you can just simply call the mixin and all the code will be formatted for you. Plus, adding arguments allows you to enhance it further as you can make your mixins flexible.

See the Pen Sass Mixins by Umesh Patel (@s00pGuY) on CodePen.


Extends are a simple rule that acts similar to a mixin, as it allows you to link all the styles from another class to the current one. Extends are perfect for duplicate code as it doesn't copy the code, it just links the class to the rule.

See the Pen Sass Extends by Umesh Patel (@s00pGuY) on CodePen.

Referencing parents

In some cases, you may want to nest a something like a pseudo-class which needs the parent's name just before to it. So, when referencing parents with the ampersand symbol, the symbol is essentially replaced with the parent's name, so you proceed with nesting.

See the Pen Sass Referencing parents by Umesh Patel (@s00pGuY) on CodePen.

How do I convert it to CSS?

Converting the Sass file into a CSS file is very easy, Sass has a watch feature where once enabled, it will compile the Sass file into a CSS file every time you save it, so it can be running in the background as you work on it. One thing to note is that this only happens with the CLI window open, once you close it, you essentially terminate the watch script.

You can also change how Sass compiles the CSS with 4 differing style outputs. The default style is nested but by using the --style parameter, you can get Sass to compile to the following styles:

  • Nested
  • Expanded
  • Compact
  • Compressed

So, what are your thoughts?

Overall, I believe that Sass is an extremely powerful tool that enhances productivity. Before changes to CSS had to done by finding the relevant rule and updating it whereas now with an organised structure, changes have never been easier. One thing I wish I could've improved on is, learning the topic earlier as that would've enabled me to use it on my major web project from the ground up.