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.
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.
Here are the links to all my pens:
Ok how did you learn it then?
I started off by watching a complete tutorial from Lynda.com, 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.
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.
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.
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.
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.
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:
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.