Simple Way to Learn SASS

What is SASS

SASS = Syntactically Awesome Style Sheet
It is an extension of CSS. It was designed by Hampton Catin and developed by Natalie Weizenbaun in 2006.
To make the CSS more maintainable & scalable, in a short SASS give us freedom and extra feature that does not have normal CSS.

Why SASS

It has some extra features special features that helps us to style that does not exist in CSS, like

• We can use variables
• We can use nested rules
• We can imports others CSS file and mixin also
• We can inherit other CSS rules
• We can make our code more maintainable in simple way
• NO DRY(Do not Repeat Yourself), we easily maintain DRY.
• SASS is free
• It supports all CSS versions
• It supports standard CSS Comment (/* Comment */) and inline comment (//comment)

How SASS Works

Our browser does not supports SASS Directly. It supports CSS only. To make it support by browser we create a demo.scss(SASS file) to convert it to demo.css file by the preprocessor transpiler(source-to-source translator).
So that our browser can easily show demo.css file.

Add SASS

Add Live Sass Compiler Extension to VS Code. It will compile the SASS file to CSS.

Then Add a folder to our project named Compiler. Under the the folder add two file name style.scss(we will write our sass file into this file) and style.css(compiler will add CSS into this after compile).
We will add stylesheet CSS file from the compiler folder. Then click Watch Sass to activate compiler.

Variables

Like JavaScript, we can declare variables in SASS and use them in where necessary. In SASS we declare variable using $ sign, then we put variable values.
Using SASS variables we can declare

• strings
• numbers
• colors
• Booleans
• lists
• nulls

Main benefits of variables is that when we use same CSS rules in multiple elements, if we want to change the value we don’t have to change one by one. We can simply change the variables value.

Nesting

SASS nesting means, we easily use CSS rules in a nesting way of our element according to their DOM tree.

Import & partial

If we want to import other SASS fill into another SASS file we can do that by using import keywords.
If we want import demo.scss file and its SASS rules into our style.scss file then we will use import keywords.
If we put under score before (_demo.scss) demo file then SASS transpiler will not convert this SASS file into CSS file, it will consider as a SASS file which rule will be imported.
The main reason for this import to make the file more maintainable.

Mixin & Include

The declaration of CSS group that can be used throughout the style sheet.
We can declare a CSS group by mixin and we can access it by include.
We can also pass variable to mixin to change its value on our demand at include.
Mixin without the variables declaration

Mixin with variables declaration

Extend

We can share rule of any CSS selector to other CSS selector by using extend.

Let’s say we create default some rule for a button of a site. We can share the rules and also add additional rules for other button selector. extend inherit the default rules to the selected selector.

If, else if, else

We use condition in sass as like as JavaScript condition. We can pass value if the condition full filled the demand.
We use if, else if, else in the middle of mixin, we pass parameter in mixin , we get the value of mixin using include with the conditional parameter.

For

For keywords in SASS is also works as similar way of JavaScript loops. It has initial value and a closing value. It checks every value and apply rules on it.

Here we can see for syntax with $i that is index and it will run 1 to 12. We have keep in mind that if we use through keyword then it will check 1 to 12 as value mention here but if we use to keyword then it will check below 1 from the mention closing value. That’s why we use 13 to get value of 1 to 12.
#{i} will apply CSS grid width by these rules.

While

While is worked as for loop. We will first declare index here, which will be initial point then we will mention the end point.
After the condition we will increase the value of index to re-walk the path up to to the closing condition.

Each

Each is like JavaScript map method. We can map over items using each.
Suppose we can declare the background color as variable but we can easily do this by using each.
Here we can $color is listing three color, when red color come to the variable then it set the background color red, again green color set the variable green and set the background color green, as blue set background color blue.

We set list of item in a different list to iterate over the list to set variable and required rules.

Here we create a color list with a variable name $colors. We put it in each to iterate over there. We have to keep in mind that when we put additional list then we have to add $key keyword to bind it with the list.

Source: https://sass-lang.com/, Anisul Islam blog