Sass stands for Syntactically Awesome Style Sheets. It means when we write code in Sass then it automatically converts the Sass code into your CSS code. We don’t want to update the CSS file. We just change the Sass code and compile it automatically with that particular code in CSS file.

 

For example, you can create a variable to store a common value to be used across many selectors. This saves you from having to repeat the same value across all of those selectors. If you need to update it, you only need to do it once where you set the variable.

 

Sass has 5 primary features.

 

• Variables
• Nesting
• Mixins
• Partials
• Inheritance

 

 

Variables

 

Variables allow you to assign a value to an easy to remember placeholder name.

 

Works with hex values, strings of text, colors, numbers, boolean values, or even value lists.

 

 

Nesting

 

Nested rules allow you to break up endlessly long selectors of CSS.

 

 

Mixins

 

Mixins allow you to chunk up CSS declarations to be reusable with one reference.

 

 

Partials

 

Sass allows you to create partial files to modularize and organize your code.

 

 

Inheritance

 

Sorting out CSS templates has turned out to be vital to styling extensive scale sites adequately. Templates in our undertakings have been getting bigger, increasingly intricate and harder to keep up as they create. This is the place Sass comes in to make everything less complex. For the individuals who presently can’t seem to investigate Sass, it is an augmentation of CSS. It gives highlights to us that don’t exist in local CSS. Some examples are articulations, factors, settling, mixins (Sass’ name for capacities), legacy, and that’s only the tip of the iceberg.

 

 

SCSS SYNTAX

 

 Advantages and Disadvantages of Sass

 

Advantages

 

Sass facilitates you to write clean, easy and less CSS in a programming construct.

 

It contains fewer codes so you can write CSS quicker.

 

It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.

 

It is compatible with all versions of CSS so you can use any available CSS libraries.

 

It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions and other values.

 

Disadvantages

 

The developer must have enough time to learn new features present in this pre-processor before using it.

 

Using Sass may cause losing benefits of browser’s built-in element inspector.

 

 

How to Import SASS

 

@import will be handled by Sass and all our CSS and SCSS files will be compiled into a single file that will end up on our live site. You can create partial Sass files that contain little snippets of CSS to include in other Sass files. Some examples are variable.scss, fonts.scss, and buttons.scss. Next, we can include all SCSS files in the main/style.scss folder. If you don’t import the partial files, then reusable components like mixin and variable will not work.

 

If you would like to know more about Sass, send us an email to hello@dignitas.digital.

 

Read Next: What is CSS and How Do You Use It?