Sass: @if and @else

@if

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 usually returns either true or false. If the expression returns true, the block is evaluated, and if the expression returns false it's not.

The .scss file below:

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}

and the generated .css below:

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

Since .square-av passes $circle: false, the @if block is skipped and only width and height are emitted. Since .circle-av passes $circle: true, the @if block runs and border-radius: 50px is added.

@else if

You can also choose whether to evaluate an @else rule's block by writing it @else if <expression> { ... }.

The block is evaluated only if the preceding @if's expression returns false and the @else if's expression returns true.

The .scss below:

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

and the generated .css below:

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

Here $direction is right, so the @else if $direction == right branch runs and sets border-left-color: black. The @else fallback uses @error to throw a compile-time error for any direction not in the list, so invalid values are caught early.

Truthiness in Sass

@if doesn't require a strict boolean. Any value is evaluated for its truthiness:

This matters when a mixin argument is left unset (defaults to null), the @if block is skipped:

@mixin label($bg: null) {
  @if $bg {
    background-color: $bg;
  }
}

.label-ok   { @include label(#ccc); }
.label-none { @include label; }

.label-ok {
  background-color: #ccc;
}

.label-none emits nothing, because $bg defaults to null, which is falsy.

Summary

• @if <expression> evaluates its block only when the expression is truthy.
• Chain conditions with @else if <expression>; each branch is tested in order and only the first match runs.
• A plain @else at the end acts as a catch-all fallback.
• Sass truthiness differs from JavaScript: 0, empty strings, and empty maps are truthy; only false and null are falsy.
• Combine @else with @error to validate inputs and fail fast on unexpected values.