@else and @else if branches in SASS - Browser Rendering Trace

Render Flow - @else and @else if branches

Read @if condition

↓

Condition true?

yes→Apply styles in @if block

no↓

Check @else if condition

↓

Condition true?

yes→Apply styles in @else if block

no↓

Apply styles in @else block if present

↓

Finish processing conditional blocks

The Sass compiler processes conditionals by checking each condition in order. It outputs styles from the first true condition block it finds, skipping the rest.

Render Steps - 3 Steps

Code Added:$color: red;

Before

[box]
[Hello]
(background: none)

→

After

[box]
[Hello]
(background: red)

Setting $color to red makes the @if condition true, so the box background becomes red.

🔧 Browser Action:Sass compiler evaluates @if, outputs CSS with background-color: red

Code Sample

A box with background color that changes based on the value of $color using @if, @else if, and @else branches.

SASS

<div class="box">Hello</div>

SASS

@if $color == red {
  .box {
    background-color: red;
  }
} @else if $color == blue {
  .box {
    background-color: blue;
  }
} @else {
  .box {
    background-color: gray;
  }
}

Render Quiz - 3 Questions

After setting $color to blue (render_step 2), what background color does the box have?

A Blue

B Red

C Gray

D No background color

Common Confusions - 2 Topics

Why does only one block's styles apply even if multiple conditions seem true?

Sass stops checking after the first true condition and applies only that block's styles, ignoring the rest (see render_steps 1-3).

💡 Only one conditional branch runs; order matters.

What happens if I omit @else and no conditions are true?

No styles from the conditional blocks apply, so no background color changes (default or inherited styles show).

💡 Without @else, no fallback styles appear if all conditions fail.

Property Reference

Directive	Condition Checked	When Applied	Visual Effect	Common Use
@if	First condition	If true	Applies styles inside @if block	Primary condition check
@else if	Additional condition	If previous @if/@else if false and this true	Applies styles inside this block	Check multiple conditions
@else	No condition	If all previous conditions false	Applies fallback styles	Default fallback styles

Concept Snapshot

@if checks a condition and applies styles if true. @else if checks another condition if previous @if/@else if are false. @else applies styles if all previous conditions are false. Only one branch runs, so order matters. Use these to create conditional styles in Sass.