An Introduction to Sass and SCSS
Sass is the most popular and easy to use. If you learn Sass, it’s very easy to learn other preprocessors.
What Is Sass?
It stands for Syntantically Awesome Stylesheets. It’s a CSS preprocessor.
It allows us to create variables, nested rules, mixins, functions, and do mathematical calculations, allowing us to write next-generation CSS today. It allows us to easily manage large CSS files and split across different files.
Every CSS file is a Sass file. so you can take your .css file contents and put it in a Sass file and it will work just fine.
There are two types of syntaxes while writing CSS in Sass.
- SASS: Files with the
.sassextension allows us to write CSS without semicolons and without curly brackets with added indentation for CSS properties.
2. SCSS: Files with the
.scss extension are the CSS we normally write, where each CSS declaration ends with a semicolon and each selector is written in curly brackets.
The choice is up to you as to which syntax to use. We will be using the SCSS syntax.
The great thing about Sass is that we write code in a
.scss file and it will be converted to a CSS file using a tool we will explore later in this article. So, in the end, the browser will render only CSS files.
Let’s understand what Sass provides.
Sass allows us to declare variables. This is one of the areas where Sass shines because we can create variables for different colors or font sizes and use that variable in any file.
So, if we want to change the color of any part of the page later, we don’t need to make changes in all places where the color is used. We just change the color in the variable and the change will be reflected in all the places where that color is used.
To declare a variable in Sass, we start the variable name with a dollar sign.
Sass provides two ways of writing comments.
- Single-line comment: double slashes
- Multi-line comment:
Note: Single-line comments will not be added to the final compiled CSS file. Only multi-line comments will be added to the final CSS. So, if you need to see the comments in a CSS file, you need to write it using the
/* */ syntax
If you have CSS like below:
We can write it using nesting like this:
So, as shown in the above CSS, nesting allows us to group together related code, which is easy to modify and maintain and also saves us from typing extra characters.
The parent selector is a special selector that’s used in nested selectors to refer to the outer selector.
If we have the following CSS:
Then, using the parent selector, we can re-write it like this:
& will refer to the parent which is
a (anchor tag), in this case.
If we have some already defined CSS that we need to apply for another div or element, we can use the
@extend selector to include the previously defined CSS without re-writing the same CSS again.
placeholder is a special type of syntax that only prints when it is extended and can help keep your compiled CSS neat and clean.
In the above demo about extend, if you click on the down arrow in the CSS section and select the
“View Compiled CSS” option, you will be able to see the final compiled CSS.
The compiled CSS will look like this:
As you can see in the compiled CSS, there is a
.menu-button selector, but we have not used that selector in any HTML code, we have just used it in a SCSS file so we can extend its properties.
There is actually no need for the
.menu-button class to be added in the final CSS as it’s redundant. So, using the
placeholder syntax, which is denoted by the percent sign
%, we can remove that redundant code from the final CSS.
As you can see in this demo, we have declared the
menu-button selector using
%menu-button. So, the final CSS will not have that redundant CSS selector which you can confirm by viewing the compiled CSS.
The compiled CSS will now look like this:
@mixin selector is similar to
@extend except that the
@mixin selector can accept parameters.
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist.
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.
We declare a mixin using
@mixin and use it using
As you can see in this demo, we have two divs. For the first div, we have not passed any value to the
bradius mixin while using include so it’s set to the default 5px border-radius.
However, the second div has our 10px border-radius which we passed explicitly.
A key point to note about differences between extend and mixin is that we can declare a mixin without accepting any parameter but the final CSS code generated by using the mixin will make the file size larger compared to extend.
Let’s see this through an example.
We will write the above demo of the placeholder from this Code Pen to use a mixin.
If you see the compiled CSS by clicking on the “View Compiled CSS” menu from the dropdown, you will see the difference. The final CSS code when extend is used is less compared to mixin.
So, the same CSS is repeated for every class if we use mixin, which will make the CSS file larger.
Therefore, you need to use mixin only if it’s taking different parameter values and you are going to include that mixin in many places.
If the mixin is used only at one place in the SCSS file and it’s not using any parameters, then it’s better to use extend which will decrease the final CSS file size.
Partials play an important role in Sass. Partials allow us to create separate
.scss files and import in another file, making it easy to maintain the related CSS code.
To declare a file as a partial file, we need to start the filename with the
underscore symbol and add it in another file using the
@import syntax without mentioning the underscore and file extension.
For example, we can create
_variables.scss, and include all of them in the main SCSS file.
_buttons.scss from the buttons folder, we use
_base.scss, we use
It’s a general practice to create a single SCSS file to import all other partial files.
// main.scss@import 'variables';
The order of import matters here. If
_buttons.scss is using some variables declared in
_variables.scss, then it needs to be imported before
_buttons.scss, as shown in
The difference between Sass’
@import and a normal
css import statement is that Sass’
@import will not make extra HTTP requests for each imported SCSS file. Instead, it will add the contents of partial files into a single file.
Operators and functions
Sass provides support for mathematical operators like
%, which we can use in our SCSS code. It also provides a
calc function that we can use to calculate any value.
width: calc(200px / 2)
This will make the button width 100px.
There is also a widely-used
lighten function provided by Sass which allows us to make any color light by a certain percentage. For example, when we mouse hover over any button or link.
Sass also has a
darken function to make the color dark instead of light.
Functions make Sass more powerful. If we want to build a menu, we can easily build using the Sass variables and functions.
So, if in the future we need to add any other menu, we just need to increment the
$tabs-count value and each menu’s width will be adjusted automatically.
Setting Up Sass for Local Development
Create a new folder with the name
sass_intro and execute the following commands in sequence:
1. npm init -y
2. npm install email@example.com firstname.lastname@example.org
The first command will create a
package.json file where
live-server dependencies will be added.
Once installed, create an
index.html and CSS folder with
main.scss inside it. Your folder structure will look like this now:
Add new scripts in the
scripts section of the
"compile": "node-sass css/main.scss css/main.css --watch",
The command will use the
css/main.scss file and will convert it to
main.css and will save it to the
package.json file will look like this:
index.html file and add the following content:
Here we have included the
css/main.css file in the
head tag. This file will be created once we run the
compile script created from the
Inside the CSS folder, create
_base.scss and add the following CSS:
_buttons.scss and add the following CSS:
_content.scss and add the following CSS:
_variables.scss and add the following content:
main.scss and add the following content:
Now run the
start commands from the terminal or command prompt.
npm run compile
npm run start
compile command will create a new
main.css file inside the
css folder and will keep watching for your changes in the
.scss file to convert it to a CSS file.
start command will load your
index.html to the browser and will automatically refresh the page if anything is changed in the HTML or CSS files.
- Complete source code.
That’s it for today. I hope you learned something new.
To integrate SASS into your React application check out my this article 👇
Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.