Why Component variant generation in SASS? - Purpose & Use Cases

The Big Idea

Discover how to style dozens of button types with just a few lines of code!

The Scenario

Imagine you are styling buttons for a website. You write separate CSS rules for each button color and size, like a red small button, a blue large button, and so on.

The Problem

When you add a new color or size, you must write new CSS rules for every combination. This takes a lot of time and can cause mistakes or inconsistent styles.

The Solution

Component variant generation lets you create style patterns that automatically produce all button versions by combining colors and sizes. You write less code and keep styles consistent.

Before vs After

✗ Before

.btn-red-small { background: red; font-size: 12px; }
.btn-blue-large { background: blue; font-size: 20px; }

✓ After

@each $color in (red, blue) {
  @each $size, $font in (small: 12px, large: 20px) {
    .btn-#{$color}-#{$size} {
      background-color: $color;
      font-size: $font;
    }
  }
}

What It Enables

You can quickly create many consistent style variants without repeating code, making design changes easy and error-free.

Real Life Example

A design system where buttons, cards, and alerts have multiple colors and sizes, all generated automatically from a few style rules.

Key Takeaways

Writing separate styles for each variant is slow and error-prone.

Component variant generation automates creating all style combinations.

This saves time and keeps your design consistent and easy to update.