In if-else statement, and even else-if, just as we can do in programming languages.
This ability of SASS to check for conditions allows us to write codes that are dynamic and not time-consuming.
@if [condition] {
/* css rule */
}
@else if [condition] {
/* css rule */
}
@else{
/* css rule */
}
You would definitely need this in a situation where a SASS mixin needs a parameter.
mixin parameter will be checked against a conditional statement followed by the
The following example uses the SASS conditional statement to check the color of the .text class when a mixin with a parameter is applied to the class.
@mixin text-color($val){@if $val == light {color: #f8f9fa;}@else if $val == dark {color: #212529;}@else if $val == danger {color: red;}@else if $val == success {color: green}@else{color: black;}}.text {font-size:16px;@include text-color(danger);}
In the code above, we created a .text class that takes a mixin called text-color.
The mixin takes a parameter which can be any of the text colors light, dark, danger, and success.
Then our if-else statement checks the color that was passed and gives the mixin the certain CSS rule to apply.