Why Conditional mixins with @if in SASS? - Purpose & Use Cases

The Big Idea

Discover how one small Sass feature can save you hours of repetitive styling work!

The Scenario

Imagine you want to style buttons differently based on their type. You write separate CSS rules for each button type manually, repeating similar code again and again.

The Problem

When you need to change a style or add a new button type, you must update many places manually. This is slow, error-prone, and makes your CSS messy and hard to maintain.

The Solution

Conditional mixins with @if let you write one reusable style block that changes based on conditions you set. This keeps your code clean and easy to update.

Before vs After

✗ Before

.btn-primary { background: blue; color: white; }
.btn-secondary { background: gray; color: black; }

✓ After

@mixin button-style($type) {
  @if $type == primary {
    background: blue;
    color: white;
  } @else if $type == secondary {
    background: gray;
    color: black;
  }
}
.btn-primary { @include button-style(primary); }
.btn-secondary { @include button-style(secondary); }

What It Enables

You can create flexible, reusable styles that adapt automatically, saving time and reducing mistakes.

Real Life Example

Think of a website with many button types--primary, secondary, danger. Using conditional mixins, you write one mixin and pass the type to style all buttons consistently and easily.

Key Takeaways

Manual styling for each case is repetitive and hard to maintain.

Conditional mixins let you write adaptable, reusable style blocks.

This approach keeps your CSS clean, efficient, and easy to update.

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