browser does not understand Sass code. Therefore, a Sass pre-processor converts Sass code into standard CSS before sending it to the browser, this process is called Transpiling.

Let’s consider an example that you are using the same color 20 times in a CSS file. Now, if a client wants a different color, then you need to change it 20 times in case of using CSS. Sass is the solution to this problem by introducing many features like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. In order to implement Sass in our project, we need to install it first. You can install it from here.

Sass has two syntaxes, SCSS syntax(.scss) and SASS syntax(.sass). The main difference is that the sass uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them.

Syntax Example:

Example

Here is an example to understand a side effect in JavaScript. In this example, we are passing some arguments to the function named printInventory(), and it will log that data on the console, which is called the side effect in JavaScript.

//SCSS Syntax
$main-color: #a2b9bc;
body {
  color: $main-color;
}
//SASS Syntax
$main-color: #a2b9bc
body
  color: $main-color