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

---
title: "@if and @else"
table_of_contents: true
introduction: >
  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' %}

{% markdown %}
  ## `@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`.
{% endmarkdown %}

{% 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 %}

{% markdown %}
  Conditional expressions may contain [boolean operators][] (`and`, `or`, `not`).

  [boolean operators]: /documentation/operators/boolean

  ### `@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 if`s 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.
{% endmarkdown %}

{% 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)
  ===
  .next {
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 2.5px;
    border-left-color: black;
  }
{% endcodeExample %}

{% render 'documentation/snippets/truthiness-and-falsiness' %}