Theming with mixins in SASS - Browser Rendering Trace

Render Flow - Theming with mixins

Read SCSS file

↓

Parse mixin definitions

↓

Parse theme variables

↓

Apply mixins where included

↓

Generate CSS rules

↓

Browser applies styles

↓

Render themed elements

The browser receives CSS generated from SCSS where mixins define reusable style blocks. Theming variables customize colors and fonts. The browser applies these styles to elements, rendering the themed UI.

Render Steps - 3 Steps

Code Added:<button class="btn-primary">Click me</button>

Before

[Empty page]

→

After

[ btn-primary ]
[ Click me  ]

The button element appears with default browser styles: simple rectangle with default colors and padding.

🔧 Browser Action:Creates DOM node and paints default button style

Code Sample

A button styled with a mixin that applies background, text color, border, and padding. The button changes style when the dark theme class is added.

SASS

<button class="btn-primary">Click me</button>

SASS

@mixin theme-colors($bg, $fg) {
  background-color: $bg;
  color: $fg;
  border: 2px solid $fg;
  padding: 0.5rem 1rem;
  font-weight: bold;
  border-radius: 0.5rem;
  cursor: pointer;
}

$light-bg: #f0f0f0;
$light-fg: #333333;
$dark-bg: #222222;
$dark-fg: #eeeeee;

.btn-primary {
  @include theme-colors($light-bg, $light-fg);
}

.btn-primary.dark {
  @include theme-colors($dark-bg, $dark-fg);
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see on the button?

A Button disappears from the page

B Button has light background, dark text, and a border

C Button text becomes invisible

D Button background becomes transparent

Common Confusions - 2 Topics

Why doesn't the button change colors when I add the dark class?

The dark class must be spelled exactly and the CSS must include the .btn-primary.dark selector with the mixin included. Without this, the dark theme styles won't apply.

💡 Check that the dark class selector is defined and matches the HTML element exactly (see render_step 3).

Why do the colors look flat and not like a real button?

The mixin sets simple colors and border but no shadows or gradients. To add depth, you need extra properties like box-shadow or gradients.

💡 Mixins can be extended with more properties for richer visuals.

Property Reference

Property	Value Applied	Visual Effect	Common Use
background-color	Variable ($bg)	Sets the button's background color	Theme background
color	Variable ($fg)	Sets the text color	Theme foreground
border	2px solid $fg	Adds a border matching text color	Visual boundary
padding	0.5rem 1rem	Adds space inside button around text	Clickable area
border-radius	0.5rem	Rounds the corners	Softens button edges
cursor	pointer	Changes cursor on hover	Indicates clickable

Concept Snapshot

Theming with mixins lets you reuse style blocks with variables. Use mixins to apply colors, borders, and spacing consistently. Change themes by passing different color variables. Add classes to switch themes dynamically. Mixins keep your styles DRY and easy to update.