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.