Conditional mixins with @if in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code?

Given the Sass mixin below, what CSS will be generated when @include button-style(true); is used?

SASS

@mixin button-style($primary) {
  @if $primary {
    background-color: blue;
    color: white;
  } @else {
    background-color: gray;
    color: black;
  }
}

.button {
  @include button-style(true);
}

A

.button {
  background-color: gray;
  color: white;
}

B

.button {
  background-color: gray;
  color: black;
}

C

.button {
  background-color: blue;
  color: black;
}

D

.button {
  background-color: blue;
  color: white;
}

💡 Hint

Remember, the mixin uses @if to check if $primary is true or false.

When $primary is true, the mixin sets background-color to blue and color to white. So the generated CSS for .button uses those colors.

🧠 Conceptual

intermediate

What error occurs if you forget the @if keyword in a conditional mixin?

Consider this Sass code snippet inside a mixin:

$primary {
  background-color: blue;
}

What error will Sass produce?

A No error, it compiles but ignores the block

B SyntaxError: Expected "@if" keyword before condition

C TypeError: $primary is not a function

D RuntimeError: Undefined variable $primary

💡 Hint

Sass requires @if keyword to start a conditional block.

Without @if, Sass does not recognize the condition and throws a syntax error expecting @if.

❓ selector

advanced

Which option produces the correct CSS for nested conditional mixins?

Given this Sass code, what CSS is generated?

@mixin theme($dark) {
  @if $dark {
    background: black;
    color: white;
  } @else {
    background: white;
    color: black;
  }
}

.card {
  @include theme(false);
  border: 1px solid gray;
}

A

.card {
  background: white;
  color: black;
  border: 1px solid gray;
}

B

.card {
  background: black;
  color: white;
  border: 1px solid gray;
}

C

.card {
  border: 1px solid gray;
}

D

.card {
  background: white;
  border: 1px solid gray;
}

💡 Hint

Check the value passed to the mixin and the @if condition.

Since $dark is false, the @else block runs, setting background to white and color to black, plus the border property.

❓ layout

advanced

How does conditional mixin affect layout properties in this Sass code?

What is the rendered CSS for this Sass snippet?

@mixin layout($flex) {
  @if $flex {
    display: flex;
    justify-content: center;
  } @else {
    display: block;
  }
}

.container {
  @include layout(true);
  width: 100%;
}

A

.container {
  display: flex;
  justify-content: center;
  width: 100%;
}

B

.container {
  display: block;
  width: 100%;
}

C

.container {
  justify-content: center;
  width: 100%;
}

D

.container {
  display: flex;
  width: 100%;
}

💡 Hint

The mixin sets display and justify-content only if $flex is true.

Since $flex is true, display:flex and justify-content:center are included along with width:100%.

❓ accessibility

expert

Which Sass mixin usage best supports accessibility with conditional styling?

You want to create a button that changes style based on a high-contrast mode flag. Which option produces CSS that ensures good color contrast for accessibility?

SASS

@mixin accessible-button($highContrast) {
  @if $highContrast {
    background-color: black;
    color: yellow;
    border: 2px solid yellow;
  } @else {
    background-color: blue;
    color: white;
    border: none;
  }
}

.button {
  @include accessible-button(true);
}

A

.button {
  background-color: black;
  color: white;
  border: 2px solid black;
}

B

.button {
  background-color: blue;
  color: white;
  border: none;
}

C

.button {
  background-color: black;
  color: yellow;
  border: 2px solid yellow;
}

D

.button {
  background-color: yellow;
  color: black;
  border: 2px solid black;
}

💡 Hint

High contrast mode uses black background with bright yellow text and border for visibility.

Option C matches the mixin call with $highContrast true, providing strong contrast for accessibility.