@else and @else if branches in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @else directive do in Sass?

The @else directive runs a block of styles only if the previous @if or @else if condition was false. It acts like the "otherwise" case in decision making.

beginner

How is @else if different from @else in Sass?

@else if lets you check another condition if the previous @if or @else if was false. @else runs only if all previous conditions were false, without checking a new condition.

beginner

Write a simple Sass example using @if, @else if, and @else.

$color: blue; @if $color == red { background: red; } @else if $color == blue { background: blue; } @else { background: gray; } This sets background color based on the value of $color.

intermediate

Can you have multiple @else if branches in Sass?

Yes, you can chain many @else if branches to check multiple conditions one after another before falling back to @else.

beginner

What happens if none of the @if or @else if conditions are true and there is no @else?

No styles inside the conditional blocks will be applied. The Sass code inside those blocks is skipped.

What does @else do in Sass?

A Runs if the previous <code>@if</code> or <code>@else if</code> condition is false

B Runs only if the previous condition is true

C Checks a new condition

D Ends the Sass file

@else runs its block only when all previous conditions are false.

Which directive lets you check another condition after an @if in Sass?

A <code>@else if</code>

B <code>@when</code>

C <code>@switch</code>

D <code>@else</code>

@else if lets you test another condition if the previous @if was false.

Can you use multiple @else if branches in Sass?

A Only inside mixins

B No, only one <code>@else if</code> is allowed

C Only if you use <code>@else</code> first

D Yes, you can chain many <code>@else if</code> branches

Sass allows multiple @else if branches to check many conditions.

What happens if no conditions match and there is no @else?

A Sass throws an error

B The last block runs anyway

C No styles inside the conditional blocks run

D The file stops compiling

If no conditions match and no @else exists, no styles inside those blocks are applied.

Which of these is the correct syntax for @else if in Sass?

A @else if (condition) { }

B @else if condition { }

C @elseif (condition) { }

D @else if { condition }

The correct syntax is @else if condition { }.

Explain how @else if and @else work together in Sass conditional statements.

Think of it like a decision tree with multiple branches.

Write a Sass snippet using @if, @else if, and @else to set a background color based on a variable.

Use $color variable and compare it to color names.

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