Boolean values and logic in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output color of this Sass code?

Given the following Sass code, what color will the .box background be after compilation?

SASS

$is-active: true;
$has-error: false;

.box {
  background-color: if($is-active and not $has-error, green, red);
}

A green

B yellow

C blue

D red

💡 Hint

Remember that and requires both conditions to be true, and not reverses the boolean.

The variable $is-active is true and $has-error is false. The expression $is-active and not $has-error evaluates to true and true, which is true. So the if function returns green.

🧠 Conceptual

intermediate

Which Sass expression evaluates to false?

Select the Sass boolean expression that evaluates to false.

A $c: not false;

B $b: true or false;

C $a: true and false;

D $d: true and not false;

💡 Hint

Recall that and requires both sides to be true to return true.

true and false is false. The others evaluate to true.

❓ rendering

advanced

What color will the .alert box be?

Consider this Sass code. What color will the .alert background be after compiling to CSS?

SASS

$error: false;
$warning: true;

.alert {
  background-color: if($error or $warning, orange, blue);
}

A red

B blue

C green

D orange

💡 Hint

The or operator returns true if either side is true.

$error is false, but $warning is true. So $error or $warning is true, making the background color orange.

❓ selector

advanced

Which selector applies styles only when both conditions are true?

Given these Sass variables, which selector will apply styles only if $is-visible and $is-enabled are both true?

SASS

$is-visible: true;
$is-enabled: false;

// Choose the correct selector

A .component { @if $is-visible or $is-enabled { color: black; } }

B .component { @if $is-visible and $is-enabled { color: black; } }

C .component { @if not $is-visible and $is-enabled { color: black; } }

D .component { @if $is-visible and not $is-enabled { color: black; } }

💡 Hint

Remember and requires both to be true.

Option B applies styles only if both $is-visible and $is-enabled are true. The others apply styles under different conditions.

❓ accessibility

expert

How to use boolean logic in Sass to improve accessibility with focus styles?

You want to add a focus outline only if $is-accessible is true and $user-prefers-focus is true. Which Sass code snippet correctly applies this logic?

SASS

$is-accessible: true;
$user-prefers-focus: false;

.button {
  // Add focus outline conditionally
}

A

.button {
  @if $is-accessible and $user-prefers-focus {
    outline: 2px solid blue;
  }
}

B

.button {
  @if not $is-accessible and $user-prefers-focus {
    outline: 2px solid blue;
  }
}

C

.button {
  @if $is-accessible or $user-prefers-focus {
    outline: 2px solid blue;
  }
}

D

.button {
  @if $is-accessible and not $user-prefers-focus {
    outline: 2px solid blue;
  }
}

💡 Hint

Focus outlines should appear only when both accessibility and user preference are true.

Option A correctly uses and to require both $is-accessible and $user-prefers-focus to be true before applying the outline. The others apply the outline under incorrect conditions.