Why @else and @else if branches in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple branching tool can save you hours of repetitive styling work!

The Scenario

Imagine you are styling a website and want different button colors based on the button type. You write separate CSS rules for each type manually, repeating similar code again and again.

The Problem

This manual way is slow and messy. If you want to add a new button type or change the logic, you must rewrite or copy-paste many rules. It's easy to make mistakes or forget to update some styles.

The Solution

@else and @else if branches let you write one clean block of code that checks conditions step-by-step. This way, you only write the shared structure once and handle different cases clearly and safely.

Before vs After

✗ Before

.button-primary { color: blue; }
.button-secondary { color: gray; }
.button-danger { color: red; }

✓ After

@if $type == 'primary' {
  color: blue;
} @else if $type == 'secondary' {
  color: gray;
} @else {
  color: red;
}

What It Enables

This lets you create flexible, easy-to-maintain styles that adapt automatically based on conditions, saving time and reducing errors.

Real Life Example

When building a theme with many button styles, you can use @else if branches to set colors, sizes, or fonts based on the button's purpose without repeating code.

Key Takeaways

Manual CSS for many conditions is repetitive and error-prone.

@else and @else if branches let you handle multiple conditions cleanly in one place.

This improves code clarity, maintenance, and flexibility in styling.

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