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

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

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

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

Hint

Use standard CSS property syntax inside the .btn class.

Practice

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

Solution

1. Step 1: Understand component variants

   Component variants allow creating different styles for the same element, like buttons with different colors.

2. Step 2: Identify the main purpose

   The main goal is to generate these style versions easily and keep code organized.

3. Final Answer:

   To create multiple style versions of the same component easily -> Option A

4. Quick Check:

   Component variant generation = multiple style versions [OK]

Hint: Variants mean different styles for one component [OK]

Common Mistakes:

• Confusing Sass with JavaScript
• Thinking Sass compiles to JS
• Believing variants remove unused CSS

2. Which Sass syntax correctly defines a mixin for generating button variants with a dynamic color?

easy

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

B. @function button-variant($color) { background-color: $color; }

C. @extend button-variant($color) { background-color: $color; }

D. @mixin button-variant($color) { background-color: $color; }

Solution

1. Step 1: Identify mixin syntax

   Mixins use '@mixin' to define reusable style blocks with parameters.

2. Step 2: Check options

   @mixin button-variant($color) { background-color: $color; } uses '@mixin' correctly; others misuse '@function', '@include', or '@extend'.

3. Final Answer:

   @mixin button-variant($color) { background-color: $color; } -> Option D

4. Quick Check:

   Mixin definition starts with '@mixin' [OK]

Hint: Define mixins with '@mixin', not '@function' or '@include' [OK]

Common Mistakes:

• Using '@function' instead of '@mixin'
• Trying to define styles inside '@include'
• Confusing '@extend' with mixin definition

3. Given the Sass code:

@mixin variant($name, $color) {
  .btn-#{$name} {
    background-color: $color;
  }
}

@include variant('primary', blue);
@include variant('danger', red);

What CSS will this generate?

medium

A. .btn-primary { background-color: blue; }
.btn-danger { background-color: red; }

B. .btn-#primary { background-color: blue; }
.btn-#danger { background-color: red; }

C. .btn-primary { color: blue; }
.btn-danger { color: red; }

D. .btn-primary { background-color: $color; }
.btn-danger { background-color: $color; }

Solution

1. Step 1: Understand interpolation in class names

   The '#{$name}' inside '.btn-#{$name}' inserts the string value of $name, creating '.btn-primary' and '.btn-danger'.

2. Step 2: Check property values

   The background-color uses the passed $color values 'blue' and 'red' correctly.

3. Final Answer:

   .btn-primary { background-color: blue; } .btn-danger { background-color: red; } -> Option A

4. Quick Check:

   Interpolation creates correct class names [OK]

Hint: Use #{} to insert variables in selectors [OK]

Common Mistakes:

• Leaving interpolation as literal text
• Confusing background-color with color property
• Not passing parameters correctly

4. What is wrong with this Sass code for generating variants?

@mixin variant($name, $color) {
  .btn-$name {
    background-color: $color;
  }
}

@include variant('success', green);

medium

A. Cannot use variables in mixin parameters

B. Incorrect property name 'background-color'

C. Missing interpolation for $name in the selector

D. Mixin cannot be included with parameters

Solution

1. Step 1: Check selector syntax

   Variables inside selectors need interpolation with '#{}'. Here '.btn-$name' misses '#{}'.

2. Step 2: Understand interpolation usage

   Correct syntax is '.btn-#{$name}' to insert the variable value.

3. Final Answer:

   Missing interpolation for $name in the selector -> Option C

4. Quick Check:

   Use '#{}' to insert variables in selectors [OK]

Hint: Use #{} around variables in selectors [OK]

Common Mistakes:

• Forgetting interpolation syntax
• Thinking variables can't be in selectors
• Misusing mixin parameters

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);

Solution

1. Step 1: Understand map usage with @each

   Using '@each $name, $color in $map' loops over keys and values, perfect for named variants.

2. Step 2: Check each option's approach

   @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); correctly loops over a map with names and colors, generating '.btn-primary', '.btn-secondary', '.btn-danger' with correct colors.

3. Step 3: Identify issues in other options

   @mixin variants($map) { .btn { background-color: map-get($map, primary); } } $btn-colors: (primary: blue, secondary: gray, danger: red); @include variants($btn-colors); only styles '.btn' once, ignoring variants. @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); uses numeric indexes without names. @mixin variants($map) { @each $color in $map { .btn-#{$color} { background-color: $color; } } } $btn-colors: (blue, gray, red); @include variants($btn-colors); loops colors but uses color names as class names incorrectly.

4. Final Answer:

   @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); -> Option B

5. Quick Check:

   Use @each with map keys and values for variants [OK]

Hint: Use @each with map keys and values for variant generation [OK]

Common Mistakes:

• Looping only colors without names
• Using numeric loops without keys
• Not generating separate classes per variant