Component variant generation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is component variant generation in Sass?

It is a way to create different styles of the same component by reusing code with small changes, like colors or sizes, using Sass features like mixins or functions.

beginner

How does a Sass mixin help in generating component variants?

A mixin lets you write reusable style blocks that accept parameters. You can change these parameters to create different variants of a component without repeating code.

intermediate

What Sass feature allows you to loop through variant names to generate styles automatically?

The @each directive lets you loop over a list or map of variant names and generate CSS for each variant, making variant generation efficient.

intermediate

Why is using maps useful in component variant generation?

Maps store key-value pairs like variant names and their colors. This helps organize variant data and makes it easy to loop through and apply styles dynamically.

beginner

Show a simple example of a Sass mixin for button variants with color as a parameter.

@mixin button-variant($color) { background-color: $color; color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; border: none; cursor: pointer; } // Usage: .button-primary { @include button-variant(blue); } .button-danger { @include button-variant(red); }

Which Sass feature is best for creating reusable style blocks with parameters?

A Variable

B Mixin

C Placeholder selector

D Function

Mixins allow reusable style blocks that accept parameters to customize styles.

What Sass directive helps you loop through a list or map to generate multiple variants?

A @extend

B @if

C @each

D @import

@each loops through lists or maps to generate repeated styles.

Why use maps in Sass for component variants?

A To import external stylesheets

B To create animations

C To define font sizes

D To store multiple values with keys for easy access

Maps store key-value pairs, useful for organizing variant data.

What is the main benefit of generating component variants in Sass?

A Writing less repetitive CSS code

B Increasing file size

C Making styles harder to maintain

D Removing all colors

Variant generation reduces repetition and keeps code DRY (Don't Repeat Yourself).

Which of these is NOT a good practice when generating variants?

A Hardcoding styles for each variant separately

B Looping through variant lists

C Using parameters in mixins

D Using maps to store variant data

Hardcoding each variant separately leads to repetitive code and is not efficient.

Explain how you would use Sass mixins and loops to create multiple button color variants.

Think about passing colors to a mixin and looping through them to generate classes.

Describe the advantages of using maps in Sass for component variant generation.

Maps help keep variant info tidy and accessible.

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