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.