@else and @else if branches in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What color will the button have?

Given the following Sass code, what will be the background color of the button when $status is set to 'warning'?

SASS

$status: warning;

button {
  @if $status == success {
    background-color: green;
  } @else if $status == error {
    background-color: red;
  } @else {
    background-color: yellow;
  }
}

A background-color: green;

B background-color: red;

C background-color: yellow;

D No background color applied

💡 Hint

Think about which condition matches the value 'warning'.

The variable $status is 'warning'. The first condition checks for 'success' which is false. The second condition checks for 'error' which is also false. So the @else branch runs, setting background-color to yellow.

🧠 Conceptual

intermediate

Which statement about @else if and @else is true?

Choose the correct statement about how @else if and @else branches work in Sass conditionals.

A @else if runs regardless of previous conditions.

B @else if runs only if all previous @if and @else if conditions are false.

C @else can have a condition like @else if.

D @else if and @else can be used without an initial @if.

💡 Hint

Think about the flow of conditional checks.

@else if only runs if all previous conditions are false. @else runs if none of the previous conditions are true. @else cannot have a condition. @else if and @else must follow an @if.

❓ rendering

advanced

What color will the paragraph text be?

Given this Sass code, what color will the paragraph text have when $theme is 'dark'?

SASS

$theme: dark;

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

A color: white;

B No color applied

C color: gray;

D color: black;

💡 Hint

Check which condition matches 'dark'.

The $theme variable is 'dark'. The first condition is false, the second condition matches, so color is set to white.

❓ selector

advanced

Which selector will be styled when $device is 'tablet'?

Consider this Sass code. Which CSS selector will get the styles when $device is 'tablet'?

SASS

$device: tablet;

.container {
  @if $device == mobile {
    display: block;
  } @else if $device == tablet {
    display: flex;
  } @else {
    display: grid;
  }
}

A .container { display: flex; }

B .container { display: block; }

C .container { display: grid; }

D No styles applied

💡 Hint

Match the $device value with the conditions.

Since $device is 'tablet', the @else if branch matches and sets display to flex.

❓ accessibility

expert

How to use @else if for accessible color contrast?

You want to set text color based on background color variable $bg. Which Sass code ensures accessible contrast by choosing black text on light backgrounds and white text on dark backgrounds using @else if?

A

$bg: light;

.text {
  @if $bg == dark {
    color: white;
  } @else if $bg == light {
    color: black;
  } @else {
    color: gray;
  }
}

B

$bg: light;

.text {
  @if $bg == dark {
    color: black;
  } @else if $bg == light {
    color: white;
  } @else {
    color: gray;
  }
}

C

$bg: light;

.text {
  @if $bg == light {
    color: white;
  } @else if $bg == dark {
    color: black;
  } @else {
    color: gray;
  }
}

D

$bg: light;

.text {
  @if $bg == light {
    color: black;
  } @else if $bg == dark {
    color: white;
  } @else {
    color: gray;
  }
}

💡 Hint

Light backgrounds need dark text for contrast.

Option D correctly sets black text for light backgrounds and white text for dark backgrounds, ensuring good contrast and accessibility.

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