Conditional mixins with @if in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mixin in Sass?

A mixin is a reusable block of styles that you can include in other selectors to avoid repeating code.

beginner

How does the @if directive work inside a Sass mixin?

The @if directive lets you add conditions inside a mixin to apply styles only when certain rules are true.

intermediate

Example: What will this Sass code do? @mixin color-theme($theme) { @if $theme == light { background: white; color: black; } @else if $theme == dark { background: black; color: white; } } .button { @include color-theme(dark); }

It will create a .button class with a black background and white text because the mixin applies styles for the 'dark' theme.

intermediate

Why use conditional mixins instead of writing separate classes?

Conditional mixins keep your code DRY (Don't Repeat Yourself) by reusing style blocks with small changes based on conditions.

beginner

Can you use multiple @if, @else if, and @else inside one mixin?

Yes, you can chain multiple conditions to handle different cases inside a single mixin.

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

A Runs JavaScript code

B Defines a new variable

C Imports another Sass file

D Adds styles only if a condition is true

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

How do you include a mixin named 'button-style' in Sass?

A @mixin button-style;

B @include button-style;

C @use button-style;

D @import button-style;

You use @include followed by the mixin name to add its styles.

Which of these is a valid condition in a Sass @if statement?

A $color == blue

B $color == "blue"

C $color = blue

D color == blue

You compare variables with == and strings can be unquoted if they are color names or identifiers.

What happens if none of the @if or @else if conditions match and there is an @else block?

A An error occurs

B Nothing happens

C The @else block runs

D The first @if block runs anyway

The @else block runs when no previous conditions are true.

Why are conditional mixins helpful in Sass?

A They allow dynamic styling based on variables

B They replace HTML tags

C They make CSS files bigger

D They run JavaScript in CSS

Conditional mixins let you change styles based on variables, making your CSS flexible.

Explain how you would use a conditional mixin in Sass to change button colors based on a theme variable.

Think about checking the theme variable inside the mixin and applying different colors.

Describe the benefits of using @if inside mixins compared to writing separate CSS classes for each style variation.

Consider how conditional mixins keep your code clean and flexible.

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