Sass @else Rule

Beginner
9 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass @else rule as the fallback branch after @if
Definition

Definition and Usage

The Sass @else rule is the optional fallback after an @if. Its block runs only when the preceding @if expression is falsey.

Write @if <expr> { … } @else { … }. Exactly one of the two branches is evaluated at compile time. Browsers never see @else — only the styles from the branch that ran.

Official pattern.

Per the Sass docs: follow @if with @else { … } when you need a clear alternate path for falsey conditions (themes, flags, binary variants).

@else vs @else if.

@else has no extra condition. For more tested branches, see @else if.

Truthiness.

Only false and null are falsey in Sass. Empty strings, empty lists, and 0 are truthy.

Syntax

Syntax

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

Pattern: test with @if → fallback with @else → emit one branch.

Reference

How It Pairs

Where @else fits in control flow:

FormMeaning
@if … { } @else { }Two-way choice; fallback has no condition
@if … { } @else if … { } @else { }Chain tests, then a final fallback (see @else if)
Inside mixins / functionsPick styles or @return values per branch
Code

SCSS Examples

Simple @if / @else pairs (no @else if chains). Open View Compiled CSS for verified output.

Example 1 — Light / Dark Theme

Official-style mixin: light colors in @if, dark colors in @else.

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

How It Works

  1. Pass $light-theme: true to take the @if branch.
  2. Pass false to take the @else branch.
  3. Each include emits one color pair — never both.
  4. Nest under body.dark & for the dark include.

Example 2 — Primary vs Ghost Button

Shared layout; exclusive fill styles in each branch.

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

How It Works

  1. Share padding and radius outside the condition.
  2. @if $primary paints the solid look.
  3. @else paints the outline (ghost) look.
  4. Call with true or false to pick one variant.

Example 3 — @else Inside a Function

Return one of two computed sizes.

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

How It Works

  1. Default $halve: false takes the @else path.
  2. @else returns the full size.
  3. Pass true to halve with math.div.
  4. Each call returns one number into the CSS.

Example 4 — Density Flag + Icon Fill

Config and mixin both use exclusive @else fallbacks.

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

How It Works

  1. Dense mode is off, so the card takes roomy @else spacing.
  2. Filled icons use the @if branch.
  3. Default @include icon() uses the outline @else.
  4. Flip the flag to recompile the other card spacing.

Example 5 — Uppercase vs Normal Content

Transform a string in one branch; leave it alone in the other.

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

How It Works

  1. Pass true to uppercase with string.to-upper-case.
  2. Default path keeps the original string via @else.
  3. Letter-spacing changes with the same branch.
  4. Only one content value is emitted per include.

Edge Cases & Pitfalls

Most @else bugs are orphaned rules, truthiness surprises, or overlapping @if blocks.

pair

@else needs @if

@else must follow an @if (or @else if chain). Alone it is a compile error.

truthy

0 and empty strings are truthy

Unlike some languages, Sass treats 0, "", and empty lists as truthy. Only false and null take the @else path.

exclusive

Prefer @else over a second @if

Two separate @if blocks can both run. Use @else when outcomes are mutually exclusive.

chain

Need more tests? Use @else if

A plain @else cannot check another expression. Chain with @else if, then end with @else.

Toolchain

Sass Support

@else is a core Dart Sass control rule. It is not a browser CSS feature — support means your Sass compiler understands it.

ImplementationStatus
Dart SassSupported (recommended)
LibSass / node-sassSupported (deprecated toolchain)
Ruby SassSupported (end-of-life)
BrowsersN/A — only see compiled CSS

Prefer Dart Sass for new projects. SCSS and indented syntax both support @else.

Remember

Key Takeaways

  • Pair: @else always follows @if.
  • Fallback: runs when the @if expression is falsey.
  • Exclusive: exactly one branch emits CSS.
  • More tests: use @else if, then a final @else.

One line: @else is the compile-time “otherwise” after @if.

Compile

Compile Notes

@else never reaches the browser. Conceptual flow:

flow.txt
1. Evaluate the @if expression
2. If truthy → run the @if block; skip @else
3. If falsey → skip @if; run the @else block
4. Final stylesheet contains only that branch’s CSS

Frequently Asked Questions

An @else block follows an @if and runs only when that @if expression is falsey. It is the alternate branch of a two-way compile-time choice.
No. @else must immediately follow an @if (or an @else if chain). It is not a standalone at-rule.
In a simple @if / @else pair, exactly one block is evaluated: the @if block if the condition is truthy, otherwise the @else block.
No. @else is the final fallback with no extra condition. @else if adds another tested condition and is covered on a separate page.
No. Like @if, it is compile-time only. Browsers see only the styles from the branch that ran.
Only false and null are falsey. Empty strings, empty lists, and 0 are truthy in Sass.

Next: Sass @else if Rule

Chain extra conditions before a final @else fallback.

Sass @else if Rule →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass @if Rule Sass @else if Rule