Simple Way to Learn SASS
Tags: sass, webdev, programming, tutorial
Published: 2022-06-13 16:58:01

# 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmkqh4lf9lyhl9tg2f6n.png)

# 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puqz7ztx66aipz4ler0u.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ocnsdavb1q8ssox13qp.png)

# 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7xwt7zdjb1zjlzjd76c.png)

# 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**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0lmqadw4rnd9f6e787a.png)

**Mixin with variables declaration**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwz9vdfdmpga5jff79q3.png)

# 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cslenjmfvaz0gsw5eqqy.png)

# 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exvdqz3zvtesvoffznep.png)

# 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ar348gmoiyso34xa2e7.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdxvm23y5myx155bpmz7.png)

# 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53wa2gm0hqydc7meqt3i.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oy82yb0v3bfmqwpoobo.png)

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