Sass @else Rule

What You’ll Learn

Sass @else is the fallback block after an @if. This page focuses on the simple two-way pattern @if … @else …: themes, variants, and function returns. Multi-condition @else if chains are covered on a separate page.

What Is @else?

Official docs: 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 (more precisely: if it is falsey).

• Must come right after an @if (same chain).
• Runs only when the preceding @if condition fails.
• Exactly one of @if / @else runs in a two-branch pair.
• Compile-time only—never appears in the CSS file.

📝 Syntax

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: #f2ece4;
    color: #036;
  } @else {
    background-color: #6b717f;
    color: #d2e1dd;
  }
}

The @else block is attached to the @if with } @else { (same line or next). It is not a second, separate rule floating elsewhere in the file.

🤝 How @else Pairs With @if

Review @if for truthiness: only false and null are falsey. When the @if condition is falsey, Sass evaluates the @else block instead.

⚖️ @else vs a Second @if

Two separate @if blocks can both emit CSS if both conditions pass. An @if / @else pair is mutually exclusive—ideal for opposites like primary vs ghost, filled vs outline, or light vs dark.

// Exclusive: only one branch
@if $primary { … } @else { … }

// Not exclusive: both can run
@if $primary { … }
@if not $primary { … } // easy to drift out of sync

📄 What About @else if?

When you need more than two outcomes (up / right / down / left, multiple sizes, and so on), Sass lets you chain @else if conditions before a final @else. That multi-branch pattern has its own tutorial so this page can stay focused on the clear two-way @else fallback.

Examples Gallery

Each example uses a simple @if / @else pair (no @else if chains). Open View Compiled CSS for verified output.

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

.banner {
  background-color: #f2ece4;
  color: #036;
}
body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

@mixin button($primary: true) {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;

  @if $primary {
    background: #036;
    color: #fff;
    border: 1px solid #036;
  } @else {
    background: transparent;
    color: #036;
    border: 1px solid #036;
  }
}

.cta {
  @include button(true);
}

.ghost {
  @include button(false);
}

.cta {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: #036;
  color: #fff;
  border: 1px solid #036;
}

.ghost {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: transparent;
  color: #036;
  border: 1px solid #036;
}

@use "sass:math";

@function half-or-full($size, $halve: false) {
  @if $halve {
    @return math.div($size, 2);
  } @else {
    @return $size;
  }
}

.box {
  width: half-or-full(100px);
  height: half-or-full(100px, true);
}

.box {
  width: 100px;
  height: 50px;
}

$prefers-dense: false;

.card {
  @if $prefers-dense {
    padding: 0.5rem;
    gap: 0.25rem;
  } @else {
    padding: 1.25rem;
    gap: 0.75rem;
  }
}

@mixin icon($filled: false) {
  width: 1.25rem;
  height: 1.25rem;

  @if $filled {
    background: currentColor;
  } @else {
    border: 2px solid currentColor;
    background: transparent;
  }
}

.star {
  @include icon(true);
}

.outline {
  @include icon();
}

.card {
  padding: 1.25rem;
  gap: 0.75rem;
}

.star {
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
}

.outline {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  background: transparent;
}

@use "sass:string";

@mixin label-case($text, $uppercase: false) {
  @if $uppercase {
    content: string.to-upper-case($text);
    letter-spacing: 0.06em;
  } @else {
    content: $text;
    letter-spacing: normal;
  }
}

.upper {
  &::before {
    @include label-case("hello", true);
  }
}

.normal {
  &::before {
    @include label-case("hello");
  }
}

.upper::before {
  content: "HELLO";
  letter-spacing: 0.06em;
}

.normal::before {
  content: "hello";
  letter-spacing: normal;
}

🚀 Real-World Use Cases

• Theme pairs — light vs dark token sets.
• Component variants — primary vs secondary, filled vs outline.
• Density modes — compact vs comfortable spacing.
• Function defaults — return A or B from a helper.
• Content transforms — optional uppercase / truncated labels.

⚠️ Common Pitfalls

• Orphan @else — it must follow an @if in the same chain.
• Two @if instead of @else — conditions can both pass and double-emit styles.
• Assuming 0 is falsey — @else still follows Sass truthiness rules.
• Stuffing many cases into @else — when you need three+ outcomes, use @else if.
• Forgetting shared styles — put common declarations outside the @if / @else pair.

💡 Best Practices