@if conditional logic in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code?

Given the Sass code below, what CSS will it produce?

$theme: dark;

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

SASS

$theme: dark;

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

A

body {
  background: transparent;
  color: inherit;
}

B

body {
  background: white;
  color: black;
}

C

body {
  background: black;
  color: white;
}

D

body {
  background: gray;
  color: black;
}

💡 Hint

Check the value of $theme and which @if branch matches it.

The variable $theme is set to 'dark', so the @else if branch for 'dark' runs, setting background to black and color to white.

🧠 Conceptual

intermediate

Which @if condition is true in this Sass snippet?

Consider this Sass code:

$size: 10px;

.container {
  @if $size > 5px {
    width: 100%;
  } @else {
    width: 50%;
  }
}

Which condition will Sass evaluate as true?

SASS

$size: 10px;

.container {
  @if $size > 5px {
    width: 100%;
  } @else {
    width: 50%;
  }
}

A $size > 5px is false, so width: 50% is applied.

B $size > 5px is true, so width: 100% is applied.

C $size > 5px causes a syntax error in Sass.

D Sass ignores the condition and applies both widths.

💡 Hint

Compare the numeric values with units in Sass.

Sass can compare units like px. Since 10px is greater than 5px, the first condition is true and width: 100% is applied.

❓ selector

advanced

What CSS selector is generated by this Sass code with @if?

Look at this Sass code:

$mode: dark;

.button {
  @if $mode == dark {
    &.dark-mode {
      background: black;
      color: white;
    }
  } @else {
    &.light-mode {
      background: white;
      color: black;
    }
  }
}

Which CSS selector will appear in the output?

SASS

$mode: dark;

.button {
  @if $mode == dark {
    &.dark-mode {
      background: black;
      color: white;
    }
  } @else {
    &.light-mode {
      background: white;
      color: black;
    }
  }
}

A .button.dark-mode { background: black; color: white; }

B .button { background: black; color: white; }

C .button.light-mode { background: white; color: black; }

D .dark-mode { background: black; color: white; }

💡 Hint

Check how the & symbol works with nested selectors in Sass.

The & symbol appends the nested class to the parent selector. Since $mode is 'dark', the .button.dark-mode selector is generated.

❓ layout

advanced

How does this Sass @if affect layout properties?

Given this Sass snippet:

$is-flex: true;

.container {
  @if $is-flex {
    display: flex;
    justify-content: center;
  } @else {
    display: block;
  }
}

What layout style will the container have?

SASS

$is-flex: true;

.container {
  @if $is-flex {
    display: flex;
    justify-content: center;
  } @else {
    display: block;
  }
}

A The container will use block layout and ignore justify-content.

B The container will cause a Sass error because $is-flex is not a string.

C The container will have no display property set.

D The container will use flex layout and center its children horizontally.

💡 Hint

Boolean variables can be used directly in @if conditions in Sass.

Since $is-flex is true, the @if branch sets display to flex and centers children horizontally with justify-content.

❓ accessibility

expert

Which Sass @if usage best supports accessible color contrast?

You want to ensure text color has enough contrast on different backgrounds. Which Sass code snippet correctly uses @if to set accessible colors?

$background: #333333;

.text {
  @if lightness($background) > 50% {
    color: black;
  } @else {
    color: white;
  }
}

SASS

$background: #333333;

.text {
  @if lightness($background) > 50% {
    color: black;
  } @else {
    color: white;
  }
}

A Sets text color to white on dark backgrounds and black on light backgrounds, ensuring contrast.

B Always sets text color to black regardless of background brightness.

C Uses an invalid function lightness() causing a Sass error.

D Sets text color to white on light backgrounds and black on dark backgrounds, reducing contrast.

💡 Hint

The lightness() function returns brightness; higher means lighter color.

The code checks if background is light (lightness > 50%) and sets text color to black for readability; otherwise white for dark backgrounds.