@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.

Practice

1. What does the @else if branch do in Sass?

easy

A. Runs only if all previous conditions were true

B. Repeats the first @if condition

C. Ends the conditional statement immediately

D. Checks another condition if the previous @if was false

Solution

1. Step 1: Understand @if and @else if roles

   The @if checks the first condition. If false, @else if checks another condition.

2. Step 2: Identify @else if behavior

   @else if only runs if the previous @if or @else if was false, allowing multiple checks.

3. Final Answer:

   Checks another condition if the previous @if was false -> Option D

4. Quick Check:

   @else if = checks next condition [OK]

Hint: Remember: @else if checks next condition only if previous fails [OK]

Common Mistakes:

• Thinking @else if runs when previous is true
• Confusing @else if with @else
• Believing @else if ends the condition chain

2. Which of the following is the correct syntax for using @else if in Sass?

easy

A. @elseif $color == red { color: red; }

B. @else if $color == red { color: red; }

C. @else if ($color == red) { color: red; }

D. @else if $color = red { color: red; }

Solution

1. Step 1: Recall correct @else if syntax

   In Sass, @else if is written as two words without parentheses around the condition.

2. Step 2: Check each option

   @else if $color == red { color: red; } uses correct syntax: @else if $color == red { ... }. @elseif $color == red { color: red; } misses space. @else if ($color == red) { color: red; } uses parentheses which Sass does not require. @else if $color = red { color: red; } uses single equals which is assignment, not comparison.

3. Final Answer:

   @else if $color == red { color: red; } -> Option B

4. Quick Check:

   Correct @else if syntax = @else if $color == red { color: red; } [OK]

Hint: Use space and double equals, no parentheses for @else if [OK]

Common Mistakes:

• Writing @elseif as one word
• Using parentheses around condition
• Using single equals instead of double equals

3. What color will be applied by this Sass code?

$color: blue;

@if $color == red {
  background: red;
} @else if $color == green {
  background: green;
} @else {
  background: black;
}

medium

A. black

B. green

C. blue

D. red

Solution

1. Step 1: Check the value of $color

   The variable $color is set to blue.

2. Step 2: Evaluate conditions in order

   First @if checks if $color == red (false). Then @else if checks if $color == green (false). Since both are false, @else runs, setting background to black.

3. Final Answer:

   black -> Option A

4. Quick Check:

   None matched, so @else runs = black [OK]

Hint: If no @if or @else if matches, @else runs [OK]

Common Mistakes:

• Assuming @else if runs when condition is false
• Thinking @else is optional and skipped
• Confusing variable value with condition

4. Identify the error in this Sass code snippet:

@if $size == large {
  font-size: 2rem;
} @else if $size = medium {
  font-size: 1.5rem;
} @else {
  font-size: 1rem;
}

medium

A. Incorrect use of curly braces in @else

B. Missing semicolon after @if condition

C. Using single equals (=) instead of double equals (==) in @else if

D. Variable $size is not declared

Solution

1. Step 1: Check condition operators

   In Sass, conditions use double equals == to compare values, not single equals = which assigns values.

2. Step 2: Locate the error

   The @else if line uses $size = medium which is assignment, causing a syntax error.

3. Final Answer:

   Using single equals (=) instead of double equals (==) in @else if -> Option C

4. Quick Check:

   Comparison needs ==, not = [OK]

Hint: Use == for comparisons, = is for assignments [OK]

Common Mistakes:

• Using = instead of ==
• Forgetting to declare variables
• Misplacing curly braces

5. Given this Sass code, what will be the background color if $theme is set to null?

$theme: null;

@if $theme == light {
  background: white;
} @else if $theme == dark {
  background: black;
} @else {
  background: gray;
}

hard

A. gray

B. black

C. white

D. null

Solution

1. Step 1: Understand null in Sass conditions

   null is a special value that does not equal strings like light or dark.

2. Step 2: Evaluate conditions with $theme = null

   Both @if $theme == light and @else if $theme == dark are false. So, @else runs, setting background to gray.

3. Final Answer:

   gray -> Option A

4. Quick Check:

   null matches no condition, so @else runs [OK]

Hint: null never equals strings; @else handles it [OK]

Common Mistakes:

• Assuming null equals a string
• Forgetting @else runs when no conditions match
• Expecting null to output literally