SASS is something that I’ve always wanted but never knew existed until recently and it is so hard to go back to vanilla CSS after getting comfortable using it. In this guide, I will explain what SASS is, how it works, and a collection of features that will help you get started!
What is SASS?
I was confused at first because I wasn’t sure what SASS was and why someone would want to use it. It is a scripting language that turns your code into effective CSS, in simpler terms, it makes writing CSS a lot more efficient and adds functionality that otherwise would be harder or in some cases absent altogether.
The way it works is that you write in files with the extension .scss and then use an interpreter to translate that into CSS and the .css files will still be the ones styling your page.
Why use SASS?
As you learn more features and use them, you will really start to see its power!
One that immediately stood out to me was the organization and how much repetitive code gets eliminated. This is always important but especially for bigger projects, it is easy to get lost shuffling through CSS files looking for what you need to change because of the amount of code and lack of organizational tools available. The solution is more efficient ways of writing things, reusable code, and nesting to name a few.
Another advantage is the addition of functions and mixins (more on those soon) which are really useful when making an adaptable and changing site. These can be used to calculate things, toggle between styles with booleans or arguments, and more.
Lastly, the code you will be writing automatically makes itself compatible with all browsers with a variety of methods, and the best part is that it handles this 100% on its own. A very simple example is that you can create a variable and use it in many parts of your code but when it gets converted to CSS it will put the actual value in all those places instead of the variable, making it more compatible. Another example is when you’re using flex and similar, it will automatically add the variations to make sure it works for all browsers.
Get Started
Now that you get an idea of what it is and why you should be using it, how do you get started? You will first need a SASS compiler to translate your code, I recommend using VSCode because they have good extensions that make it really easy.
Now add a .scss file, for this blog we will use the example main.scss but you can name it anything and have as many as you’d like. It is also a good idea to have multiple files for organization, for example, a variables.scss to keep your variables. After turning on your compiler it should make a main.css which is where all the SASS code will be converted to. It is a good idea to check this file if your code isn’t doing what you want it to but DO NOT write anything in this file.
Lastly in your HTML link the CSS file, make sure it's not the SASS file. Repeat this for as many files as needed and the setup is done.
Learn
Before we dive into the features of SASS, it is important to highlight that vanilla CSS can and WILL be used as part of this, so if you aren’t comfortable with vanilla CSS, learn that first and then come back.
Most things will be written in the same way as CSS, in which we have selectors and then in {} we put the properties.
Variables
Variables are very useful, as you can use the same variable for many things and change all of them at once easily. It also has a functional purpose now too.
The syntax is:
$NAME: VALUE;
where the capitalized words are replaced with the name and value you want, for example:
$primary-color: blue;
$secondary-color: #ffffff;
And to call them you simply add $NAME like so:
background: $secondary-color;
As mentioned before, this will compile to
background: #ffffff;
in the CSS file making it more compatible than if it was a CSS variable.
Math
Very quickly, math operations in CSS usually need to be in calc() but with SASS you can just write the expression alone ONLY IF the types are the same.
For example
calc(100px - 20px)
can just be
100px - 20px
but
100% - 20px
won't work without the calc()
and if the type is not specified for one of the two, it will assume the type of the other one.
Maps
Maps are a lot like hashes from other languages, and basically, they are a list of values with a key for each value that you can use to get the value.
It is defined just like a normal variable, except with () and the list inside.
$NAME: (
“KEY”: VALUE,
“KEY”: VALUE
)
example:
$font-weights: (
“regular”: 400,
“paragraphs”: 700
)
and then you can use the key to assign the value to something
.paragraph {
font-weight: map-get($font-weights, paragraphs);
}
Which once again, when compiled to CSS will be the value instead of a variable name.
Nesting
Nesting is my favorite part of using SCSS because it makes everything a lot less repetitive and a lot more organized. Let's say you want to style everything in a section called menu and then wanted to style the menu__paragraph1 and also wanted to add a hover function. This would require a lot of retyping that could be solved with nesting.
We style the parent
.menu {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
but then we can nest menu__paragraph1 into it with its own properties using &
.menu {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
&__paragraph1{
font-weight: bold;
}
}
but in CSS this will not translate to
.menu .menu__paragraph {}
it will be
.menu__paragraph {}
unless we interpolate, which is an easy fix, change it to
#{&}__paragraph1{}
Lastly, to add a hover we can add
&:hover {
color: green;
}
as a property of menu__paragraph1 which brings it to
.menu {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
#{&}__paragraph1{
font-weight: bold;
&:hover {
color: green;
}
}
}
But what if we want all the properties of menu__paragraph1 for menu__paragraph2 and but change the hover color?
.menu {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
#{&}__paragraph1{
font-weight: bold;
&:hover {
color: green;
}
}
#{&}__paragraph2 {
@extend .menu__paragraph1;
&:hover {
color: red;
}
}
by using extend it will copy all the properties and then change or add the new properties for that specific one.
A warning is to always check your nesting scope to make sure for example menu__paragraph2 is NOT a property of menu__paragraph1 instead they should both be properties of menu which is the parent. They should be nested in the same way they are in the HTML file.
Functions
Functions can be called and return something, as well as compute which is generally its purpose.
@function NAME($ARGUMENT) {
CODE
@return VALUE;
}
and can be called with
NAME(ARGUMENT)
example:
@function double($number) {
@return $number + $number;
}
then use it:
.menu {
width: double(30%);
}
And the width is now set to 60%
Mixin
This is where the major organization comes in and mixins will drastically reduce the amount of code you need to write in situations where you need to repeat many lines of code.
Let's say we have 35 different buttons that we need to apply the following to:
position: absolute;
width: 100px;
margin-right: 10px;
margin-left: 10px;
instead of writing those 4 lines 35 times (4 x 35 = 140), you can write the following:
@mixin buttons{
position: absolute;
width: 100px;
margin-right: 10px;
margin-left: 10px;
}
and now every time you need to apply it all you have to do is write:
@include buttons;
And those 140 lines became 5 declaration lines and 35 @include (35 + 5 = 40), saving 100 lines of code AND with the added functionality that you are able to change the width once and have ALL of them change. If you need to change, for example, the width for a specific button but want the other properties you can just do the same thing and then redefine width !AFTER! the @include.
A mixin can also have arguments just like functions and implemented in the same exact way too
@mixin buttons($width-number){
position: absolute;
width: $width-number;
margin-right: 10px;
margin-left: 10px;
}
.menu{
@include buttons(200px);
}
If Statements
SASS has if statements too and they can be used in combination with the previous features mentioned. Let's take a look at how we can use this to toggle dark mode:
@mixin theme($darkmode: true) {
@if $darkmode-theme {
background: black;
color: whte;
}
}
You can set an argument darkmode with a default value of true and then use an if statement to check if the theme should be changed to darkmode colors.
body {
background: white;
color: black;
@include theme(darkmode: true);
}
that can also be written
body {
background: white;
color: black;
@include theme(true);
}
and of course the lightmode equivalent
body {
background: white;
color: black;
@include theme(false);
}
Notice that the mixin is called after the light theme colors because if it is false the normal light theme colors will remain but if the dark theme is true then it will override the colors to the new ones. If reversed, meaning the mixin theme was the first thing written, it would have no effect because no matter if it's true or false it will always be overridden by the other code of the same properties below it.
Conclusion
This is an amazing, powerful, and enjoyable upgrade for CSS and once you get comfortable with it and experience the incredible difference it makes you won’t ever want to go back. It is surprisingly easy to get the hang of if you are comfortable with HTML and vanilla CSS, and in my opinion really worth learning.
