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;
}