Component variant generation in SASS - Browser Rendering Trace

Render Flow - Component variant generation

Write base component styles

↓

Define variant mixins or placeholders

↓

Generate variant classes using @each loop

↓

Compile CSS with base + variants

↓

Browser applies styles to elements with variant classes

Sass processes base styles first, then loops through variant definitions to create multiple CSS classes. The browser then applies these styles to elements with matching classes, showing different visual variants.

Render Steps - 3 Steps

Code Added:.btn { padding: 0.5rem 1rem; border: none; color: white; font-weight: bold; border-radius: 0.25rem; cursor: pointer; }

Before

[ ]

[ ]

[ ]

→

After

[ btn ]

[ btn ]

[ btn ]

Added base button styles giving all buttons padding, white text, rounded corners, and pointer cursor.

🔧 Browser Action:Creates base CSS rules and applies to all elements with class .btn

Code Sample

Three buttons styled with a base .btn class and color variants generated by Sass for primary, secondary, and danger states.

SASS

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Danger</button>

SASS

$variants: (primary: #007bff, secondary: #6c757d, danger: #dc3545);

.btn {
  padding: 0.5rem 1rem;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 0.25rem;
  cursor: pointer;
}

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

Render Quiz - 3 Questions

After applying step 3, what visual difference do the buttons show compared to step 1?

A All buttons remain the same color with no background

B Each button has a different background color matching its variant

C Buttons lose padding and become smaller

D Text color changes to black

Common Confusions - 3 Topics

Why do all buttons share the same padding and font styles even though they have different colors?

Because the base .btn class sets common styles like padding and font. The color variants only change background color, so the buttons keep consistent size and shape.

💡 Base styles apply to all variants; variant classes add only what changes visually.

Why doesn't the button change color if I forget to add the variant class like btn-primary?

The background color is set only in the variant classes (e.g., .btn-primary). Without that class, the button uses base styles which have no background color.

💡 Always add the variant class to see the color change.

Why can't I see the variant colors if I write the Sass variable but don't use @each to generate classes?

Sass variables store values but don't create CSS by themselves. You must use loops or mixins to generate actual CSS rules for the variants.

💡 Variables hold data; loops create CSS from that data.

Property Reference

Property	Value Applied	Visual Effect	Common Use
padding	0.5rem 1rem	Adds space inside button around text	Makes button larger and easier to click
background-color	#007bff, #6c757d, #dc3545	Changes button background color per variant	Indicates different button purposes
color	white	Text color is white for contrast	Ensures readability on colored backgrounds
border-radius	0.25rem	Rounds button corners slightly	Gives modern, friendly look
cursor	pointer	Changes cursor on hover	Shows button is clickable

Concept Snapshot

Component variant generation uses Sass variables and loops to create multiple CSS classes from one base style. Base styles define common look and feel. Variants add specific differences like colors. Use @each to loop through variants and generate CSS. Buttons with variant classes show different backgrounds but share padding and font. This keeps code DRY and consistent visually.