Sass @else if extends an @if chain with more tested branches. This page focuses on multi-condition chains: first match wins, optional final @else, keyword APIs, and five compiled examples.
01
Chain
@else if
02
Order
First match
03
Fallback
Final @else
04
Keywords
up / right / …
05
APIs
Mixins & funcs
06
Practice
5 examples
Concept
What Is @else if?
Official docs: you can 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 (falsey) and the @else if’s expression returns true (truthy).
You can chain as many @else ifs as you want after an @if. The first block in the chain whose expression is truthy will be evaluated, and no others. If there is a plain @else at the end, its block runs when every other test fails.
Always part of an @if chain—not a standalone rule.
Evaluated in source order; first truthy branch wins.
Later @else if / @else blocks are skipped after a match.
Compile-time only—never appears in the CSS file.
💡
Beginner tip
Use @if alone for optional styles, @else for two outcomes, and @else if when you have three or more named cases.
Foundation
📝 Syntax
styles.scss
@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}.";
}
Each } @else if … { continues the same chain. Keep comparisons mutually exclusive when possible so order does not surprise you.
Evaluation
🎯 First Match Wins
Sass walks the chain from top to bottom:
Test the opening @if.
If falsey, test each @else if in order.
Stop at the first truthy block and run only that block.
If none match and a final @else exists, run that fallback.
⚠️
Order matters
Put more specific conditions before broader ones. A wide test early in the chain can shadow later branches that never get a chance to run.
It adds another tested branch after an @if. The block runs only if every preceding condition was falsey and this @else if expression is truthy.
As many as you need. Sass evaluates them in order and runs only the first truthy block in the chain.
No. Once one block in the @if / @else if / @else chain succeeds, the rest are skipped.
@else if has its own condition. A plain @else has no condition—it is the final fallback when every prior test failed. See the Sass @else Rule page for two-way branches.
Often yes for public APIs—unknown keywords should fail loudly. Soft defaults in @else are fine when a safe fallback exists.
No. Like @if and @else, it is compile-time only. Browsers see styles from the winning branch only.
Did you know?
Official Sass docs demonstrate @else if with a CSS triangle mixin—one of the clearest ways to see how a single shared setup plus directional branches becomes clean CSS.
@else if turns a simple conditional into an ordered multi-branch decision: test cases in sequence, run the first match, and optionally finish with @else (or @error). Use it for keyword APIs with three or more outcomes.
