This article is the ultimate guide to Sass. We will cover everything from what is sass, how to compile it, and important features like mixins, variables and more. Lets get right into it
What is Sass?
Sass is a CSS pre-processor that allows us to use various programming features like variables, loops and conditional statements in our CSS and then compile it to regular CSS. Sass is written in .sass files as well as .scss files depending on the syntax used (refer to Sass Syntax section). The browser can't read Sass so Sass must be compiled to regular CSS in order to be read by the browser. There are numerous ways to compile Sass discussed in the Compiling Sass section towards the end of this article.
Your First Sass File
To get started with using sass, create a new file. You can call it whatever you want but make sure the file extension is either .sass or .scss depending on what type of syntax you wish to use (discussed below).
Sass Syntax
Sass has two distinctly different syntaxes with their own pros and cons; these are the indented syntax (written in .sass files) and scss (written in .scss files). The indented syntax, also known as the older syntax, removes the use of brackets and semicolons and instead uses indentation. The code below shows an example of scss syntax.
.navigation {
height: 40px;
width: 100vw;
background: #f1f1f1;
.brand {
color: #000;
font-size: 2rem;
margin-left: 10vw;
}
}
Looks very similar to CSS however Sass has many additional, useful features.
Sass Features
- Variables
- Partials
- Mixins
- Nesting and more
These 4 are the most commonly used features so they will be the ones covered in this article. Let's start with variables.
Variables
Variables store values under the variable name and allow it to be reused across the stylesheet so if the variable's value is changed, all occursions of the variable are also changed. To define a variable the dollar sign ($) must be placed before the name. For example, to define a variable named 'mainColor' with the value of '#2583e8', the following statement would be used:
$mainColor: #2583e8;
Note: You can use // to define comments in Sass as opposed to CSS's /* */ regular comment syntax.
The variable's value can equal any value CSS value; from hexadecimal values to pixel margins. To use the value, you simply enter the name with the dollar sign ($) in front in place of the property value. For example, to set the color of all h1s to mainColor, the following code could be used.
$mainColor: #2583e8;
h1 {
color: $mainColor;
}
Note: This is scss syntax but the same concept applies in the indented syntax.
Partials
Partials are separate Sass files that can be imported that allow you to easily separate your various styles. To make a file a partial, it must start with an underscore ( _ ). The generic form of a partial is:
_filename.scss or _filename.sass
To import the partial into your main stylesheet, the @import statement can be used. For example, the following code would be used to import a partial called buttons.
@import "buttons";
Note: You don't need to include the underscore or file extension when importing a partial.
Mixins
Mixins allow you to define a set of styles that can be re-used throughout the sass stylesheet. To create a mixin, you simple use the @mixin keyword as well as the name of the mixin. For example, the following code would be used to define a mixin called slow-transition.
@mixin slow-transition {
transition: 2s ease-in-out;
}
This mixin can then be used anywhere in the stylesheet using the @include statement, as shown below.
@mixin slow-transition {
transition: 2s ease-in-out;
}
div {
@include slow-transition;
}
.another-element {
@include slow-transition;
}
Additionally, you can add arguments to your mixins which makes them extremely useful in certain scenarios. For instance, we could add a property argument to the slow-transition mixin which would add that property to the transition.
@mixin slow-transition($property) {
transition: $property 2s ease-in-out;
}
And then when including the mixin, you simply pass in the argument.
@mixin slow-transition($property) {
transition: $property 2s ease-in-out;
}
div {
@include slow-transition(background);
}
You can include as many arguments as you need and you can also set default values for arguments if they are passed in. To set default values, simple add = value to the end of the argument when defining the mixin.
Hint: Make sure to change value to whatever value you want.
Nesting
Sass allows you to nest css selectors in a way that gives your styling visual hierachy similr to HTML. This has the added benefit of organizing your CSS and making it more readable. For instance, the following code is simple styling of a navigation bar in CSS.
nav {
height: 40px;
width: 100vw;
background: #f1f1f1;
}
nav ul {
display: flex;
list-style: none;
margin-left: 10vw;
}
nav li {
margin: 0 10px;
}
nav a {
color: darkgrey;
text-decoration: none;
}
In SCSS, this can be written as the code below.
nav {
height: 40px;
width: 100vw;
background: #f1f1f1;
ul {
display: flex;
list-style: none;
margin-left: 10vw;
}
li {
margin: 0 10px;
}
a {
color: darkgrey;
text-decoration: none;
}
}
You could even nest elements like the list item further however be careful how nested elements are. Overly nested rules result in over-qualified CSS that is harder to maintain and is considered by many as a bad practice.
Compiling
Now that we have discussed various features of Sass, we can now talk about how to compile sass so it can be read by the browser. The reason why it needs to be compiled is because browsers can only read regular CSS and not sass.
Text Editor Extensions
The easiest way to compile your sass is by using an extension for your text editor. Visual Studio Code has an extension called Live Sass Compiler that allows you to compile sass automatically and easily. You can download the extension from here.
To actually compile sass with the extension installed, click the Watch Sass button in the bottom right of your screen. This will then watch sass files opened in your text editor so that when one is saved, it automatically compiles it into a regular CSS file of the same name.
There are also other ways to compile sass. For instance, NPM packages such as node-sass can be used however the text editor extension is usually the easier option. If you are using a library such as React or a framework like Vue.js, using the NPM package would be the more logical choice since these frameworks have built in support for them.
What Have You Learned
Today, you've learned the most useful features of sass, how to compile it and what's the point of using it in the first place. I hope you begin using Sass in your projects and are pleased with the result.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
GitHub: Blake-K-Yeboah
LinkedIn: Blake-K-Yeboah
You can also show your support by buying me a coffee 😃
