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