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.

Practice

1. What does the @if directive inside a Sass mixin do?

easy

A. It imports another Sass file.

B. It loops through a list of values.

C. It defines a new CSS class.

D. It applies styles only if a condition is true.

Solution

1. Step 1: Understand the role of @if in Sass mixins

   The @if directive checks a condition and applies styles only when that condition is true.

2. Step 2: Compare with other options

   Looping is done with @for or @each, importing uses @import, and defining classes is done with selectors, not @if.

3. Final Answer:

   It applies styles only if a condition is true. -> Option D

4. Quick Check:

   @if controls conditional style application [OK]

Hint: Remember: @if controls conditions inside mixins [OK]

Common Mistakes:

• Confusing @if with loops like @for or @each
• Thinking @if imports files
• Assuming @if creates CSS selectors

2. Which of the following is the correct syntax to use @if inside a Sass mixin?

easy

A. @mixin example($flag) { @if $flag { color: red; } }

B. @mixin example($flag) { if ($flag) { color: red; } }

C. @mixin example($flag) { @if ($flag) color: red; }

D. @mixin example($flag) { @if $flag: { color: red; } }

Solution

1. Step 1: Review correct @if syntax in Sass mixins

   The correct syntax uses @if followed by a condition without parentheses, then curly braces for the block: @if $flag { ... }.

2. Step 2: Check each option

   @mixin example($flag) { @if $flag { color: red; } } matches correct syntax. @mixin example($flag) { if ($flag) { color: red; } } misses @ before if. @mixin example($flag) { @if ($flag) color: red; } incorrectly uses parentheses and misses braces. @mixin example($flag) { @if $flag: { color: red; } } uses colon incorrectly.

3. Final Answer:

   @mixin example($flag) { @if $flag { color: red; } } -> Option A

4. Quick Check:

   Correct @if syntax = @mixin example($flag) { @if $flag { color: red; } } [OK]

Hint: Use @if without parentheses, with braces for blocks [OK]

Common Mistakes:

• Omitting @ before if
• Using parentheses around condition
• Using colon instead of braces

3. Given the Sass code:

@mixin color-choice($color) {
  @if $color == 'red' {
    color: red;
  } @else if $color == 'blue' {
    color: blue;
  } @else {
    color: black;
  }
}

.test {
  @include color-choice('blue');
}

What color will the .test class have?

medium

A. red

B. black

C. blue

D. no color applied

Solution

1. Step 1: Check the mixin call parameter

   The mixin is called with 'blue' as the argument for $color.

2. Step 2: Follow the conditional branches

   The first condition checks if $color == 'red' which is false. The second condition @else if $color == 'blue' is true, so color: blue; is applied.

3. Final Answer:

   blue -> Option C

4. Quick Check:

   Input 'blue' triggers blue color [OK]

Hint: Match input string exactly in @if conditions [OK]

Common Mistakes:

• Confusing single quotes with no quotes
• Ignoring @else if branch
• Assuming default else applies first

4. Identify the error in this Sass mixin:

@mixin size($value) {
  @if $value > 10
    font-size: 2rem;
  @else
    font-size: 1rem;
}

medium

A. Missing curly braces after @if and @else blocks

B. Incorrect comparison operator >

C. Mixin name cannot be 'size'

D. Variables cannot be used in @if conditions

Solution

1. Step 1: Check syntax for @if and @else blocks

   In Sass, when using @if and @else inside mixins, blocks must be wrapped in curly braces { }.

2. Step 2: Identify missing braces

   The code lacks braces after @if $value > 10 and @else, causing syntax errors.

3. Final Answer:

   Missing curly braces after @if and @else blocks -> Option A

4. Quick Check:

   Always use braces for conditional blocks [OK]

Hint: Always wrap @if/@else blocks in braces { } [OK]

Common Mistakes:

• Omitting braces for single-line blocks
• Using wrong comparison operators
• Thinking variable names are restricted

5. You want a mixin that sets background color based on a status: 'success' = green, 'warning' = yellow, 'error' = red, else gray. Which Sass mixin correctly uses @if to achieve this?

hard

A. @mixin status-bg($status) {
@if $status = 'success' {
background-color: green;
} @else if $status = 'warning' {
background-color: yellow;
} @else if $status = 'error' {
background-color: red;
} @else {
background-color: gray;
}
}

B. @mixin status-bg($status) {
@if $status == 'success' {
background-color: green;
} @else if $status == 'warning' {
background-color: yellow;
} @else if $status == 'error' {
background-color: red;
} @else {
background-color: gray;
}
}

C. @mixin status-bg($status) {
@if $status == success {
background-color: green;
} @else if $status == warning {
background-color: yellow;
} @else if $status == error {
background-color: red;
} @else {
background-color: gray;
}
}

D. @mixin status-bg($status) {
@if $status === 'success' {
background-color: green;
} @else if $status === 'warning' {
background-color: yellow;
} @else if $status === 'error' {
background-color: red;
} @else {
background-color: gray;
}
}

Solution

1. Step 1: Check comparison operators and string quotes

   Sass uses == for comparison and strings must be quoted. @mixin status-bg($status) { @if $status == 'success' { background-color: green; } @else if $status == 'warning' { background-color: yellow; } @else if $status == 'error' { background-color: red; } @else { background-color: gray; } } uses == and quotes correctly.

2. Step 2: Review other options for errors

   @mixin status-bg($status) { @if $status = 'success' { background-color: green; } @else if $status = 'warning' { background-color: yellow; } @else if $status = 'error' { background-color: red; } @else { background-color: gray; } } uses single = which is assignment, not comparison. @mixin status-bg($status) { @if $status == success { background-color: green; } @else if $status == warning { background-color: yellow; } @else if $status == error { background-color: red; } @else { background-color: gray; } } misses quotes around strings. @mixin status-bg($status) { @if $status === 'success' { background-color: green; } @else if $status === 'warning' { background-color: yellow; } @else if $status === 'error' { background-color: red; } @else { background-color: gray; } } uses === which is invalid in Sass.

3. Final Answer:

   @mixin status-bg($status) { @if $status == 'success' { background-color: green; } @else if $status == 'warning' { background-color: yellow; } @else if $status == 'error' { background-color: red; } @else { background-color: gray; } } -> Option B

4. Quick Check:

   Use == and quotes for string comparison in Sass [OK]

Hint: Use == and quotes for string checks in @if [OK]

Common Mistakes:

• Using = instead of == for comparison
• Omitting quotes around strings
• Using === which is invalid in Sass