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 the short SASS give us freedom and extra feature that does not have normal CSS.
Why SASS
It has some extra features special features that help us to style that does not exist in CSS, like
1. We can use variables
2. We can use nested rules
3. We can import other CSS files and mixin also
4. We can inherit other CSS rules
5. We can make our code more maintainable in a simple way
6. NO DRY(Do not Repeat Yourself), we easily maintain DRY.
7. SASS is free
8. It supports all CSS versions
9. It supports standard CSS Comment (/* Comment */) and inline comment (//comment)
How SASS Works
Our browser does not support SASS Directly. It supports CSS only. To make it supported by the browser we create a demo.scss(SASS file) to convert it to a demo.css file by the preprocessor transpiler(source-to-source translator).
So that our browser can easily show the demo.css files.
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 folder add two file names style.scss (we will write our sass file into this file) and style.css (the compiler will add CSS into this after compiling).
We will add the stylesheet CSS file from the compiler folder. Then click Watch Sass to activate the compiler.
Variables
Like JavaScript, we can declare variables in SASS and use them where necessary. In SASS we declare a variable using the $ sign, then we put variable values.
Using SASS variables we can declare
1. strings
2. numbers
3. colors
4. Booleans
5. lists
6. nulls
The main benefit of variables is that when we use the same CSS rules in multiple elements if we want to change the value we don’t have to change it one by one. We can simply change the variable's value.
<h1>This is SASS Demo</h1>
$header-color: #000;
$header-bg: #fff;h1{
background-color: $header-bg;
color: $header-color;
}
Nesting
SASS nesting means, we easily use CSS rules in a nesting way of our element according to their DOM tree.
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>nav{
margin: 10px;
ul{
list-style: none;
li{
display: inline-block;
padding: 10px;
color: red;
}
}
}
Import & partial
If we want to import another SASS fill into another SASS file we can do that by using important keywords.
If we want to import demo.scss file and its SASS rules into our style.scss file then we will use import keywords.
If we put underscore before (_demo.scss) demo file then the SASS transpiler will not convert this SASS file into a CSS file, it will consider as a SASS file which rule will be imported.
The main reason for this import is to make the file more maintainable.
_demo.scss
@import "demo";Mixin & Include
The declaration of the CSS group can be used throughout the style sheet.
We can declare a CSS group by mixin and we can access it by including.
We can also pass a variable to mixin to change its value on our demand at include.
Mixin without the variables declaration
@mixin demoStyle($f-size, $t-align){
font-size: $f-size;
text-align: $t-align;
color: #fff;
background-color: #000;
}.demo{
@include demoStyle(16px, justify);
}
Mixin with variables declaration
@mixin demoStyle{
font-size: 16px;
text-align: justify;
color: #fff;
background-color: #000;
}.demo{
@include demoStyle;
}
Extend
We can share the rules of any CSS selector with other CSS selectors by using extend.
Let’s say we create default a rule for a button of a site. We can share the rules and also add additional rules for other button selectors. **extend** inherit the default rules to the selected selector.
<input type="button" value="download" class="btn-download">
.btn{
border-radius: 10px;
padding: 10px;
} // default css rules.btn-download{
@extend .btn; //inherit btn rules
background-color: light-blue; // add additional rules
color: #ff; // add additional rules
}
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 the mixin, we get the value of mixin using include with the conditional parameter.
@mixin setFontSize($size){
@if$size== small{ // we can use string for condition
font-size: 14px;
}
@els if $size == medium{
font-size: 18x;
}
@els if $size == large
font-size: 22
}
@else{
font-size: none;
}
}.demo-1{
@include setFontSize(small);
}.demo-2
@include setFontSize(medium)
}
For
For keywords in SASS also work in a similar way to JavaScript loops. It has an initial value and a closing value. It checks every value and applies rules to it.
<section class="demo">
<div class="row">
<div class="col-4">Demo 1</div>
<div class="col-4">Demo 2</div>
<div class="col-4">Demo 3</div>
</div>
</section>[class*="col-"]{
float: left;
}@for $i from 1 to 13 { //@for $i from 1 through 12
.col-#{$i} {width: 100%/12 * $i}
}.demo{
background-color: lightcyan;
.row::after{
clear: both;
display: flex;
content: "";
}
}
Here we can see for syntax with $i is an index that will run from 1 to 12. We have to keep in mind that if we use through keyword then it will check 1 to 12 as the value mentioned here but if we use to keyword then it will check below 1 from the mentioned closing value. That’s why we use 13 to get values of 1 to 12.
#{i} will apply CSS grid width by these rules.
While
While it worked as for loop. We will first declare the index here, which will be the initial point then we will mention the endpoint.
After the condition, we will increase the value of the index to re-walk the path up to the closing condition.
<section class="demo">
<div class="row">
<div class="col-4">Demo 1</div>
<div class="col-4">Demo 2</div>
<div class="col-4">Demo 3</div>
</div>
</section>[class*="col-"]{
float: left;
}$i: 1;@while $i < 13{
.com-#{$i}{
width: 100% / 12 * $i;
}
$i: $i+1;
}
Each
Each is like the JavaScript map method. We can map over items using each.
Suppose we can declare the background color as a variable but we can easily do this by using each.
Here we can $color is listing three colors, when the red color comes 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 sets the background color blue.
<section class="demo">
<div class="row">
<div class="col-4">Demo 1</div>
<div class="col-4">Demo 2</div>
<div class="col-4">Demo 3</div>
</div>
</section>@each $color in red, green, blue{
.color-#{$color}{
background-color: $color;
}
}
We set a list of items in a different list to iterate over the list to set variables and required rules.
<section class="demo">
<div class="row">
<div class="col-4">Demo 1</div>
<div class="col-4">Demo 2</div>
<div class="col-4">Demo 3</div>
</div>
</section>$colors: (
color1: red,
color2: green,
color3: blue,
);@each $key, $color in $colors{
.color-#{$color}{
background-color: $color;
padding: 10px;
text-align: center;
}
}
Here we create a color list with a variable name $colors. We put it in each to iterate over there. We have to remember that when we put an additional list, we have to add the $key keyword to bind it with the list.
Source: https://sass-lang.com/, Anisul Islam blog
