Build a DRY button with Sass maps and mixins

WHAT THIS TESTS This is a practical design question testing whether you can turn Sass features into a maintainable component with a single source of truth, so adding a variant or size is one small change rather than a copy-paste.

A GOOD ANSWER COVERS Start with shared structure: a base mixin or placeholder selector that holds everything common to all buttons, like display, padding rhythm, border radius, font, cursor, and transitions. Next, model the variations as data. Define a Sass map for variants keyed by name with the relevant color values, for example primary with its background and text color, and danger with its own. Loop over that map with @each, emitting one modifier class per entry that includes the base and sets background and foreground from the map values. Do the same for sizes: a map keyed by size name with padding and font-size values, looped to emit size modifiers. This way the visual catalog lives in maps, the structure lives in the base, and the generation is mechanical. Adding a new variant or size means adding one map entry, and nothing else duplicates.

COMMON WRONG ANSWERS Hand-writing a separate full ruleset for every variant and size, which duplicates the shared styles and drifts over time. Hardcoding colors inline instead of centralizing them in maps or tokens. Using @extend for parameterized variants where a mixin or loop is cleaner. Forgetting that variants and sizes are orthogonal and should compose.

LIKELY FOLLOW-UPS Why a map plus @each rather than many mixins? How do you handle hover and disabled states per variant? How would you tie the maps to design tokens? How do variants and sizes compose on one element?

ONE CONCRETE EXAMPLE You create a button base with shared layout, a variants map containing primary and danger entries with their colors, and a sizes map containing small and large entries with their padding and font sizes. Two @each loops generate modifier classes like the primary variant and the large size. To add a success variant later, you add one entry to the variants map and the loop produces the class automatically.