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.