What is Component variant generation in SASS?

SASSmarkup~5 mins

Component variant generation in SASS

Choose your learning style10 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Start learning this pattern below

Jump into concepts and practice - no test required

Recommended

Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong

Introduction

Component variant generation helps you create different styles of the same element easily. It saves time and keeps your code organized.

You want buttons with different colors but the same shape.

You need cards that look similar but have different backgrounds.

You want to create alert messages with different importance levels (success, warning, error).

You want to keep your styles consistent but flexible for different uses.

Syntax

SASS

@mixin component-variant($name) {
  &--#{$name} {
    @content;
  }
}

.component {
  // base styles
  @include component-variant('variant-name') {
    // variant styles
  }
}

The @mixin defines reusable style blocks.

The &--#{$name} creates a modifier class like .component--variant-name.

Examples

This creates .button--red and .button--blue with different background colors.

SASS

@mixin button-variant($color) {
  &--#{$color} {
    background-color: $color;
    color: white;
  }
}

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;

  @include button-variant(red);
  @include button-variant(blue);
}

This creates a custom alert variant with green background and white text.

SASS

@mixin alert-variant($bg-color, $text-color) {
  &--custom {
    background-color: $bg-color;
    color: $text-color;
    padding: 1rem;
    border-radius: 0.25rem;
  }
}

.alert {
  font-size: 1rem;
  font-weight: 600;

  @include alert-variant(green, white);
}

Sample Program

This example shows two buttons with different colors using component variant generation in Sass. The base .button class has common styles. The variants .button--red and .button--blue add different background colors. Hover effects darken the colors for better interaction feedback.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Button Variants</title>
  <style type="text/scss">
    $red: #e63946;
    $blue: #457b9d;

    @mixin button-variant($color) {
      &--#{$color} {
        background-color: $color;
        color: white;
        border: none;
        cursor: pointer;
        @content;
      }
    }

    .button {
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      font-weight: bold;
      font-family: Arial, sans-serif;
      margin: 0.5rem;
      transition: background-color 0.3s ease;

      @include button-variant(red) {
        background-color: $red;
      }

      @include button-variant(blue) {
        background-color: $blue;
      }
    }

    .button--red:hover {
      background-color: darken($red, 10%);
    }

    .button--blue:hover {
      background-color: darken($blue, 10%);
    }
  </style>
</head>
<body>
  <button class="button button--red" aria-label="Red button">Red Button</button>
  <button class="button button--blue" aria-label="Blue button">Blue Button</button>
</body>
</html>

OutputSuccess

Important Notes

Use meaningful variant names to keep your code easy to understand.

Component variants help keep your CSS DRY (Don't Repeat Yourself).

Always test your variants on different screen sizes for good responsiveness.

Summary

Component variant generation creates different styles for the same element easily.

Use Sass mixins with dynamic class names for flexible variants.

Variants keep your styles organized and reusable.

Practice

(1/5)

1. What is the main purpose of component variant generation in Sass?

easy

A. To create multiple style versions of the same component easily

B. To write JavaScript inside Sass files

C. To compile Sass into JavaScript

D. To remove unused CSS automatically

5. You want to generate button variants for 'primary', 'secondary', and 'danger' with colors blue, gray, and red using a Sass map and a mixin. Which code correctly creates all variants with minimal repetition?

hard

A. @mixin variants($map) { .btn { background-color: map-get($map, primary); } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors);

B. @mixin variants($map) { @each $name, $color in $map { .btn-#{$name} { background-color: $color; } } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors);

C. @mixin variants($map) { @for $i from 1 through length($map) { .btn-#{$i} { background-color: nth($map, $i); } } } $btn-colors: (blue, gray, red); @include variants($btn-colors);

D. @mixin variants($map) { @each $color in $map { .btn-#{$color} { background-color: $color; } } } $btn-colors: (blue, gray, red); @include variants($btn-colors);

Component variant generation in SASS

Start learning this pattern below

Practice

Solution

Step 1: Understand component variants

Step 2: Identify the main purpose

Final Answer:

Quick Check:

Solution

Step 1: Identify mixin syntax

Step 2: Check options

Final Answer:

Quick Check:

Solution

Step 1: Understand interpolation in class names

Step 2: Check property values

Final Answer:

Quick Check:

Solution

Step 1: Check selector syntax

Step 2: Understand interpolation usage

Final Answer:

Quick Check:

Solution

Step 1: Understand map usage with @each

Step 2: Check each option's approach

Step 3: Identify issues in other options

Final Answer:

Quick Check: