In today’s fast-moving world, knowing Sass is an important part of web development. Today, almost all large projects use some sort of preprocessor like Sass, Less, Stylus, etc.
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
.sass extension 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.
Variables
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.
$background-color: #ff0000;
$sm-font-size: 16px;
$lg-font-size: 20px;
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
Nesting
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.
Parent selector
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:
So, the & will refer to the parent which is a(anchor tag), in this case.
Extend
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
A 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 codepen 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
The @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 @include.
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
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 _buttons.scss, _base.scss, _variables.scss, and include all of them in the main SCSS file.
To import _buttons.scss from the buttons folder, we use @import 'buttons/buttons';.
To import _base.scss, we use @import 'base';.
It’s a general practice to create a single SCSS file to import all other partial files.
@import 'variables';
@import 'base';
@import 'buttons';
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 main.scss above.
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 +, -, *, /, and %, which we can use in our SCSS code. It also provides a calc function that we can use to calculate any value.
button {
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 node-sass@4.13.1 live-server@1.2.1
The first command will create a package.json file where node-sass and 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 package.json.
"scripts": {
"compile": "node-sass css/main.scss css/main.css --watch",
"start": "live-server"
}
The command will use the css/main.scss file and will convert it to main.css and will save it to the css folder.
Now, your package.json file will look like this:
Open the 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 package.json.
Inside the CSS folder, create _base.scss, _variables.scss, _buttons.scss, and _content.scss files.
Open _base.scss and add the following CSS:
Open _buttons.scss and add the following CSS:
Open _content.scss and add the following CSS:
Open _variables.scss and add the following content:
$main-background-color: #f0c77a;
$content-background-color: #777;
Open main.scss and add the following content:
@import 'variables';
@import 'base';
@import 'buttons';
@import 'content';
Now run the compile and start commands from the terminal or command prompt.
npm run compile
npm run start
The 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.
The 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.
You can check out the GitHub source code for the same in this repository.
That’s it for today. I hope you learned something new.
I hope you've been enjoying my articles and tutorials I've been writing. If you found them useful, consider buying me a coffee! I would really appreciate it.
Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.
