SASS and SCSS if else conditional Directive examples| Free SASS|SCSS tutorials

Sass provides condition directives such as @if to evaluate the conditional expression and executes a CSS code if the condition is not false.

@if directive sass

It provides two versions of @if directive.

Here is a simple @if directive example

$hide-item: true !default;
@mixin isShow() {
 @if $hide-item {
 display: block;
 }
}
.param {
 @include isShow();
}

Generated CSS

.param {
     display: block;
}

Here is simple @if @else directive example

$hide-item: false !default;
@mixin isShow() {
 @if $hide-item {
 display: block;
 } @else {
 display: none;
 }
}
.param {
 @include isShow();
}

Generated CSS is

.param {
     display: none;
}