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