Learn SASS in 5 Minutes!

SASS stands for Syntactically Awesome StyleSheets. Sass can be considered as a plugin for CSS that makes working with styles very easy for us especially when your CSS files are very large and complex. Sass makes it easy to manage and maintain CSS styles.

SASS is a preprocessor for the CSS language. In fact, Sass has come to compensate for the limitations and weaknesses of the CSS language, and by adding interesting features to it, it makes writing CSS code easier and faster.

This article aims to explain all the concepts of SASS very briefly.

1. Variables

Just like other programming languages, SASS also allows you to define variables. For example, you can put the value of a color in a variable and use it multiple times in the program. This helps you to quickly change the color of different elements by just changing one part (variable).

Using a variable you can store a value and then use it many times in different places. Variables are very powerful. Because they allow you to change your code quickly. Permissible values ​​for variables are numbers, strings, colors, null, etc. To define variables in SASS, you must use the $ sign followed by the variable name. Let’s see an example:

SASS Code — Defining Variables

Compiled CSS

2. Nesting

SASS allows you to use the CSS rules for nesting. It is a great way to organize and structure CSS code and allows you to avoid unnecessary duplication. Let’s see how it works:

Nesting in SCSS

CSS output

Magical &

Using & in nesting can greatly help you to avoid repetitive codes. It allows you to reference a parent element. Let’s see an example :

HTML TAGS

USING & IN NESTING

It is also a powerful feature for writing pseudo-classes :

Using & for pseudo-classes

3. Mixin

Mixins are another great feature of Sass. Basically, Mixins allow you to group the definitions of CSS that you want to reuse on your website. We send the values as arguments.

This makes Mixins more flexible. Sass uses the @mixin command to define Mixins and the @include command to use them in the program. A mixin can also include other mixins. Let’s take a look at these examples:

Using Mixin

A mixin that includes other mixins

Passing values to a mixin

4.Extend

Inheritance is one of the most useful features of SASS. Using extensibility, we can transfer a set of CSS attributes from one to another. Extensibility is used when multiple elements have commonalities in the CSS attribute. Using scalability saves a lot on writing duplicate code.

The @extend command is used only once in the Sass file. The idea is that you can inherit styles from other selectors and receive styles from them. You can easily expand it wherever you need it. Let’s see how it works:

Using extend for inheritance

5.Partial and Import

Another feature that SASS provides is the creating of files called Partial, which actually contain separate styles that can be imported into the main SASS file. Partial files start with an underscore (_) like _MyPartial.scss which with @import can be imported into the main SASS file. Using Partial helps to modulate project styles.

Import in SASS:

When we use @import in a CSS file, an HTTP-request is sent to the server. But import in SASS brings information in another way, and that is that SASS attaches the imported file to the original file and merges it, and no new request is sent to the server. We can use _partial.scss to split files in sass, and to use this file in the main SASS file, we have to use the @import command.