if-else rule in SassScript is similar to if-else rule in any other programming language. Two blocks. Once for the condition success and another for everything else.
@if {
...
} @else{
...
}
We use if-else statement to control what to execute in different scenarios. Just like any other programing language, if-else returns true for the satisfied condition and false if not.
This is how we can easily place either a circle or a square using just if.
@if Example in SCSS
@if and @else Example in SCSS
Add few @else ifs
Once you add @else if, the blocks will only execute when the preceding @if‘s condition is the false and and the @else if’s condition is true.
If none of the conditions/expressions are true then it will execute the last @else block by default, if you add the @else block.
Let’s modify the first example:
conditions examples if-else sass
