sass-site/source/documentation/at-rules/control/if.md

title	table_of_contents	introduction
@if and @else	true	The `@if` rule is written `@if <expression> { ... }`, and it controls whether or not its block gets evaluated (including emitting any styles as CSS). The [expression](/documentation/syntax/structure#expressions) usually returns either [`true` or `false`](/documentation/values/booleans)—if the expression returns `true`, the block is evaluated, and if the expression returns `false` it’s not.

{% render 'code_snippets/example-if' %}

@else

An @if rule can optionally be followed by an @else rule, written @else { ... }. This rule's block is evaluated if the @if expression returns false.

{% codeExample 'if' %} $light-background: #f2ece4; $light-text: #036; $dark-background: #6b717f; $dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) { @if $light-theme { background-color: $light-background; color: $light-text; } @else { background-color: $dark-background; color: $dark-text; } }

.banner { @include theme-colors($light-theme: true); body.dark & { @include theme-colors($light-theme: false); } }

$light-background: #f2ece4 $light-text: #036 $dark-background: #6b717f $dark-text: #d2e1dd

@mixin theme-colors($light-theme: true) @if $light-theme background-color: $light-background color: $light-text @else background-color: $dark-background color: $dark-text

.banner @include theme-colors($light-theme: true) body.dark & @include theme-colors($light-theme: false) {% endcodeExample %}

Conditional expressions may contain boolean operators (and, or, not).

@else if

You can also choose whether to evaluate an @else rule's block by writing it @else if <expression> { ... }. If you do, the block is evaluated only if the preceding @if's expression returns false and the @else if's expression returns true.

In fact, you can chain as many @else ifs as you want after an @if. The first block in the chain whose expression returns true will be evaluated, and no others. If there's a plain @else at the end of the chain, its block will be evaluated if every other block fails.

{% codeExample 'else' %} @use "sass:math";

@mixin triangle($size, $color, $direction) { height: 0; width: 0;

border-color: transparent;
border-style: solid;
border-width: math.div($size, 2);

@if $direction == up {
  border-bottom-color: $color;
} @else if $direction == right {
  border-left-color: $color;
} @else if $direction == down {
  border-top-color: $color;
} @else if $direction == left {
  border-right-color: $color;
} @else {
  @error "Unknown direction #{$direction}.";
}

}

.next { @include triangle(5px, black, right); }

@use "sass:math"

@mixin triangle($size, $color, $direction) height: 0 width: 0

border-color: transparent
border-style: solid
border-width: math.div($size, 2)

@if $direction == up
  border-bottom-color: $color
@else if $direction == right
  border-left-color: $color
@else if $direction == down
  border-top-color: $color
@else if $direction == left
  border-right-color: $color
@else
  @error "Unknown direction #{$direction}."

.next @include triangle(5px, black, right) {% endcodeExample %}

{% render 'doc_snippets/truthiness-and-falsiness' %}