Introduction to SASS

This article is about SASS (Syntactically Awesome Style Sheets) and its implementation. SASS is an extension of CSS that facilitates you to write CSS in less code using features like variables, nested rules, inline imports, functions and more. Lets look at each of these features one by one.

Before moving into the code section, we need to setup a small configuration. Browsers cannot read SASS files. So they should be compiled to CSS files for the browsers to read. In Visual Studio Code you can download an extension called Live Sass Compiler. This extension compiles SASS files to CSS. After enabling this extension, a new button with the label “Watch Sass” will appear in the bottom of the IDE.

Let us now move into the code…

First create a html file with the name index and include the following code.

Then create a folder called styles and inside this folder create new file called style with .scss extension. Include the following code inside the file.

After implementing this file, click the “Watch Sass” button mentioned above. When this button is clicked, compilation takes place and CSS files are created. Now your project structure should look like

Now link this newly created CSS file to the index.html file.

We can write the above code with the help of variables which will produce the same results.

Another feature is using nested rules. Suppose if we want to add hover features, we can do as below.

We can also separate the code into multiple files and import them to simplify the code.

Another feature of SASS is functions. In our code, all the elements have common properties such as font-family, font-size and color. So we can create a common function which includes these common properties and use them in the code.

Sass disadvantages
1. Code has to be compiled.
2. Difficult Troubleshooting.
3. Using Sass may cause losing benefits of the browser’s built-in element inspector.