Component variant generation in SASS - Mini Project: Build & Apply

Component Variant Generation with Sass

📖 Scenario: You are building a button component for a website. The button should have different color styles depending on its variant: primary, secondary, and danger. You want to use Sass to generate these variants easily and keep your CSS clean.

🎯 Goal: Create a Sass setup that generates CSS classes for .btn-primary, .btn-secondary, and .btn-danger with different background colors and text colors using a Sass map and a loop.

📋 What You'll Learn

Create a Sass map called $btn-colors with keys primary, secondary, and danger and their respective color values.

Create a variable called $btn-base-color for the default text color.

Use a @each loop to generate CSS classes for each button variant.

Each generated class should have a background color from the map and the text color from $btn-base-color.

💡 Why This Matters

🌍 Real World

Web developers often need to create multiple style variants of components like buttons. Using Sass maps and loops helps generate these variants efficiently without repeating code.

💼 Career

Knowing how to use Sass for component variant generation is a valuable skill for front-end developers working on scalable and maintainable CSS codebases.

1

Create the button colors map

Create a Sass map called $btn-colors with these exact entries: primary: #007bff, secondary: #6c757d, and danger: #dc3545.

SASS

// Create the $btn-colors map with primary, secondary, and danger colors
// Your code here

Need a hint?

Use parentheses ( ) to create a Sass map and separate entries with commas.

2

Add the base text color variable

Create a variable called $btn-base-color and set it to #ffffff for white text color.

SASS

$btn-colors: (
  primary: #007bff,
  secondary: #6c757d,
  danger: #dc3545
);

// Create $btn-base-color variable for text color
// Your code here

Need a hint?

Use $btn-base-color: #ffffff; to set the white color.

3

Generate button variant classes with a loop

Use a @each loop with variables $name and $color to iterate over $btn-colors. Inside the loop, create a CSS class named .btn-#{$name} that sets background-color to $color and color to $btn-base-color.

SASS

$btn-colors: (
  primary: #007bff,
  secondary: #6c757d,
  danger: #dc3545
);

$btn-base-color: #ffffff;

// Use @each loop to generate button variant classes
// Your code here

Need a hint?

Use @each $name, $color in $btn-colors { ... } and string interpolation .btn-#{$name} for class names.

4

Add a base button style

Add a CSS class .btn that sets padding to 0.5rem 1rem, border-radius to 0.25rem, and font-weight to 600.

SASS

$btn-colors: (
  primary: #007bff,
  secondary: #6c757d,
  danger: #dc3545
);

$btn-base-color: #ffffff;

@each $name, $color in $btn-colors {
  .btn-#{$name} {
    background-color: $color;
    color: $btn-base-color;
  }
}

// Add base .btn class styles below
// Your code here

Need a hint?

Use standard CSS property syntax inside the .btn class.