Conditional mixins with @if in SASS - Mini Project: Build & Apply

Using Conditional Mixins with @if in Sass

📖 Scenario: You are creating a simple button style in Sass that changes its background color based on a condition.

🎯 Goal: Build a Sass mixin called button-style that uses @if to set the background color to blue if the parameter $primary is true, or gray if false.

📋 What You'll Learn

Create a mixin named button-style with a parameter $primary

Use @if inside the mixin to check if $primary is true

Set background color to blue if $primary is true

Set background color to gray if $primary is false

Apply the mixin to two button classes: .btn-primary with $primary: true and .btn-secondary with $primary: false

💡 Why This Matters

🌍 Real World

Conditional mixins help you write reusable styles that change based on input, making your CSS cleaner and easier to maintain.

💼 Career

Front-end developers often use Sass mixins with conditions to create flexible design systems and theme components efficiently.

1

Create the button-style mixin with a $primary parameter

Write a Sass mixin named button-style that takes one parameter called $primary.

SASS

# Your code here

Need a hint?

Use @mixin followed by the mixin name and parentheses with the parameter.

2

Add @if condition inside the button-style mixin

Inside the button-style mixin, add an @if statement that checks if $primary is true.

SASS

@mixin button-style($primary) {
  // Add @if condition here
}

Need a hint?

Use @if $primary == true { } to check the condition.

3

Set background colors inside the @if and @else blocks

Inside the @if block, set background-color: blue;. Add an @else block that sets background-color: gray;.

SASS

@mixin button-style($primary) {
  @if $primary == true {
    // Set background-color blue
  } else {
    // Set background-color gray
  }
}

Need a hint?

Use @else after the @if block to set the alternative style.

4

Apply the button-style mixin to .btn-primary and .btn-secondary classes

Create two CSS classes: .btn-primary that includes @include button-style(true); and .btn-secondary that includes @include button-style(false);.

SASS

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

// Add .btn-primary and .btn-secondary classes below

Need a hint?

Use @include with the mixin name and pass true or false as argument.