SASS for dummies
Plain-old CSS tends to get very messy, very fast. Solution? SASS!
Table of contents
What is SASS?
SASS is a CSS pre-processor. It extends CSS to add functionalities such as variables, nesting and functions. This makes CSS reusable, easier to write and more maintainable.
At runtime, the SASS code is compiled to regular CSS code which then proceeds to style the HTML as normal.
Let's take a look at the key concepts with small examples. Note that this is not intended as a deep dive but simply as an introduction.
Variables
SASS has variables which you can define once and reuse (like any programming language you might be familiar with).
This is a simple example where we have defined a variable (color-primary) and used it inside a class.
Nesting
Nesting in SASS helps us to write cleaner code, which is intuitively more understandable.
Consider how we style a nav and the list items inside it with normal CSS.
This changes with SASS to:
The CSS generated for the SASS code is the same as the first picture.
Mixins
A mixin, simply put, is a reusable piece of code labelled with a name. For eg. if we have the same 3 lines of code in 3 different places, we would instead create a mixin and simply include the mixin using the mixin name.
The syntax is pretty straightforward, we first use the @mixin keyword to declare a mixin named basic-setup. We then include it using the @include keyword in the button class.
Mixins also accept arguments.
Functions
Just like functions in any other programming language, SASS functions accept arguments and return a value.
This is a subtract function which accepts two values, subtracts them and returns the result. Note how we use the @function keyword to declare a function, how we call the function and also how the units are defined by multiplying it with 1px.
Extends
Extends, like mixins work on the principle of DRY (Don't Repeat Yourself), but they are fundamentally for different purposes.
Consider this example to understand the concept:
We have btn-green and btn-red which extend the button-placeholder. Thus they can be said to have inherited it. Extends also differ from mixins in terms of the final compiled CSS.
Additional Points
Like I said at the start, this piece is intended as an introduction. Some important things I have glossed over, which you can look up in more detail are:
- More examples on nesting and how to use the ampersand symbol in nesting.
- Difference between mixins and extends in terms of the compiled CSS (also what the compiled CSS for variables/functions/extends/mixins/nesting looks like).
- SASS also has certain in-built functions which you can use.
- The existence of loops and control directives such as if/else.
Go through tons of examples for each section in the article + look up the additional points.
The purpose of this article is not for you to mug up SASS syntax but for you to understand how to transform clunky CSS code into clean, reusable and maintainable SASS. Remember, why we do it is far, far more important than how we do it!