SASS is preprocessor of CSS, we can also refer it as CSS with superpower. SASS stands for Syntactically Awesome Style Sheets.

To save the file in SASS format we need to add .scss extension in the file.

Here we will learn how to use SASS in Visual Studio Code.

Initially in VSC we need to make a basic html file naming index.html and a folder for SASS naming sass.

Inside the sass folder we need to create a file naming main.scss.

Before executing the file we need to install an extension in our Visual Studio Code named as “Live Sass Compiler” which is shown below:

Once we install the extension we can see an option Live Sass in the status bar of Visual Studio Code, we need to click on that to make the Sass live.

If the status changes to “watching” automatically we can see that in the Scss folder main.css and main.css.map files are created.

Now whatever code we execute in main.scss it will be imported automatically to the main.css file.

Also we have to pay attention in linking the css script with the html file, as we will not link main.scss file in the html rather we will link main.css file in the html file.

Now we can start styling our file in main.scss and automatically all the codes will be imported in main.css and if it requires any conversion for being compatible with browser it will convert the codes automatically and make it compatible.

• Key features of Sass which make it better than CSS is we can use :-

– Operators

– Variables

-Nesting

-Mixin

-Parameter

-Partials

It make it convenient for us to execute complicated codes very easily with these features.

Now we will see the features in details:-

• Operators – We can use operators in Scss as shown below:

And if we see the same code in main.css we will see the actual values without the operators:

• Variables – We can use variables in scss as shown below:

Here we can see that we have declared a variable named as $bg-color and we have assigned a color to it and we can assign the same variable where we want to use that color.

• Nesting – We can use nesting in scss as shown below:

Here we can see that inside the class main_header itself we have assigned the values for <h1> and <h2>.

• Mixin – We can use mixin in scss as shown below:

With the help of mixin feature we can use a set of codes which is suppose to be used number of times in the project, we can assign that set of codes under @mixin file name{} and we can just use the name with @include in the front wherever we want to add those codes.

• Parameter – We can use parameter in scss as shown below:

In this feature we can use parameters under the mixin feature. In the Line 16 we can see that we have created a mixin named as “name2” in which we have assigned a parameter “$rem” which is assigned in “letter-spacing” and we have called that parameter in the line 31 and 38 by giving it a value of “1rem”.

Similarly we can pass number of parameters to make some changes in the codes which are under the “mixin”.

• Partials – In partials we can make our scss file less complex by making separate files for variables and mixin and then importing those files in the main scss. By this way we can easily make any changes in the mixin and variable without any complexity.

We need to keep one thing in mind that we have to use “_” while creating the partial files for ‘mixin’ and ‘variables’ so that it does not make any issue with the main scss file.

We can see the example below:

_mixin.scss:

_variable.scss:

main.scss:

Index.html:

main.css:

This is the codes for all the files and we can see the following output:

To know more about SASS you can refer the video given below:

Tagged : css / HTML / scss