sass Loops and Conditons Conditional directive (if)
Example
The @if control directive evaluates a given expression and if it returns anything other than false, it processes its block of styles.
Sass Example
$test-variable: true !default
=test-mixin
@if $test-variable
display: block
@else
display: none
.test-selector
+test-mixin
SCSS Example
$test-variable: true !default
@mixin test-mixin() {
@if $test-variable {
display: block;
} @else {
display: none;
}
}
.test-selector {
@include test-mixin();
}
The above examples produces the following CSS:
.test-selector {
display: block;
}
