Now a days every programmer will follow a principle which says Don’t Repeat Yourself(DRY),

So, we have methods/functions in programming and we can call them when it is needed and we have conditional attributes in HTML to display html elements conditionally. When we think about CSS, stylesheets are getting larger and harder to maintain due to writing the same lines again and again. This is where the SASS/SCSS can help us to build a programmatic CSS.

SCSS/SASS has features like nesting, mixins, conditional statements and loops and many more like this.

There are two syntaxes available 1. SCSS and 2. SASS

1. SCSS is known as Sassy version of CSS and is a newer and most used one. It has similar syntax to CSS because SCSS is a superset of CSS. It’s file extension is .scss

2. SASS (Syntactically Awesome Style Sheets) is an older syntax of SASS, it uses indentation rather than semicolon and braces. It’s file extension is .sass

Here is an example of SASS and SCSS,

You might have a doubt that browsers can only read CSS, but how will this work on web browsers ?

A CSS preprocessor will compile code which is written in SCSS/SASS and generate a CSS file.

Below are the few interesting topics of SCSS,

Variables: 

Variables can store information that you want to reuse throughout your stylesheet. You can store things like colors and any CSS value that we can reuse in a stylesheet. Sass uses the $ symbol to make something a variable. 

By using variables we can change background color or font color very easily and also this is very important when it comes to theming of web apps.

Here’s an example:

Partials:

We can create separate files which have smaller snippets of styles. This allows for better structure of stylesheets. A partial is a SASS file named with a leading underscore (_fileName.scss). The underscore lets SASS know that the file is a partial, and it will not be converted into a CSS file.

We can use these files by importing in other files by using @import directive. When using @import we can ignore leading underscore.

Here is an example: 

Below is the file structure with partials:

We can include these partials in Main.scss as below: 

Now main.scss will be converted into main.css and all the styles present in variables, example1 and 2 will now be available in main.css.

Nesting:

Remember nesting in HTML?, the same way we can nest our CSS code in SCSS.

SCSS allows us to nest our CSS code in the same manner. Nesting is a shortcut to creating CSS rules. So instead of writing so many lines of CSS just to be specific on the style we want to apply to an element, we simply nest it

Here’s an example: 

We can even nest CSS properties too: 

Ampersand(&) in Nesting:

& is a very useful feature in SCSS, if you want to select any selector or class of the same element in that case we use &.

To select any Pseudo-element/class of element we don’t need to add a space after & and add Pseudo-element/class name as shown below: 

Modules:

As we build a project we might see a common SCSS which we don’t have to repeat, to overcome this we can split our files and if we want to use them in any of the SCSS files we need to use the @use rule. This rule loads all the mixins/variables and functions present in other SCSS file with a namespace based on the file name.

When we are including a file using @use we don’t need to include an extension of the file, it will find it if automatically it’s a partial file.

Mixins:

When you find yourself writing same code over and over again, Sass mixins will help you to reduce the lines and these are similar to the functions in JavaScript. 

SCSS mixins are CSS functions that you can include wherever we want.

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin d-flex. We’re also using the variables $f-dir, $f-wrap, $ali-cont, $jus-cont, $ali-item inside the parentheses, so we can pass in a d-flex of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Here’s an example: 

Extend:

The @extend directive lets you share a set of CSS properties from one selector to another. This directive is useful if you have almost identically styled elements that only differ in some small details.

What the above code does is .btn-report & .btn-submit to behave just like %btn. That means anywhere that %btn shows up, .btn-report & .btn-submit will too. When the CSS is generated then we can see that each of the classes will get the same CSS properties as %btn.

Operators: 

Sass has a useful set of operators for working with different values. These include the standard mathematical operators like + and *, as well as operators for various other types:

• == and != are used to check if two values are the same (similar to programming language).
• +, -, *, /, and % have their usual mathematical meaning for numbers, with special behaviors for units that match the use of units in scientific math. Also, we can use + to concatenate strings.
• <, <=, >, and >= check whether two numbers are greater or less than one another.

Here’s an example: 

Built-in Modules:

Sass provides many built-in modules which contain useful functions. These modules can be loaded with the @use rule like any user-defined stylesheet, and their functions can be called like any other module member. All built-in module URLs begin with sass: to indicate that they’re part of Sass itself.

Check out this to know more about Built-in Modules functions.