Theming with mixins in SASS - Deep Dive

Overview - Theming with mixins

What is it?

Theming with mixins in Sass means creating reusable style blocks that can change appearance based on different themes like light or dark mode. Mixins are like little style recipes you can call anywhere in your CSS to apply consistent styles. By using theming mixins, you can easily switch colors, fonts, or layouts without rewriting code. This helps keep your styles organized and adaptable.

Why it matters

Without theming mixins, changing the look of a website for different themes would mean copying and changing many style rules manually, which is slow and error-prone. Theming mixins let you update the entire look by changing just a few values, saving time and avoiding mistakes. This makes websites more user-friendly and easier to maintain, especially as design trends or user preferences change.

Where it fits

Before learning theming with mixins, you should understand basic Sass syntax, variables, and how mixins work. After this, you can explore advanced Sass features like functions and control directives, or learn how to integrate Sass theming with JavaScript for dynamic theme switching.

Mental Model

Core Idea

Theming with mixins means writing flexible style blocks that adapt their look based on theme settings, so you can change a website’s appearance easily and consistently.

Think of it like...

It’s like having a cookie cutter that can shape dough into different cookie designs by just swapping the dough color or flavor, instead of making a new cutter for each cookie type.

┌─────────────────────────────┐
│         Theme Mixin         │
│  (style recipe with inputs) │
└─────────────┬───────────────┘
              │
   ┌──────────┴───────────┐
   │                      │
┌──▼───┐              ┌───▼───┐
│Light │              │ Dark  │
│Theme │              │Theme  │
└──────┘              └───────┘
   │                      │
   └──────────┬───────────┘
              │
       ┌──────▼───────┐
       │  Styled CSS  │
       │ (adapted look)│
       └──────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Sass Mixins Basics

Concept: Learn what mixins are and how to create and use them in Sass.

Mixins are reusable blocks of CSS styles you can define once and include anywhere. For example: @mixin button-style { padding: 1rem 2rem; border-radius: 0.5rem; font-weight: bold; } .button { @include button-style; background-color: blue; color: white; } This saves repeating the same styles for multiple buttons.

Result

The button class gets padding, rounded corners, and bold text from the mixin, making the CSS shorter and easier to maintain.

Understanding mixins unlocks the power of reusable styles, which is the foundation for theming.

2

Foundation

Using Sass Variables for Colors

Concept: Learn how to store colors in variables to easily change them later.

Variables hold values like colors or sizes. For example: $primary-color: #3498db; $secondary-color: #2ecc71; .button { background-color: $primary-color; color: white; } If you change $primary-color, all uses update automatically.

Result

Changing $primary-color changes the button background everywhere it’s used, making color updates simple.

Variables let you centralize theme colors, which is essential for switching themes quickly.

3

Intermediate

Creating Theme Mixins with Parameters

🤔Before reading on: do you think mixins can accept inputs to customize styles? Commit to yes or no.

Concept: Mixins can take parameters to adapt styles based on input values like colors.

You can write mixins that accept colors as parameters: @mixin theme-colors($bg, $text) { background-color: $bg; color: $text; } .card { @include theme-colors(#fff, #333); } .alert { @include theme-colors(#f8d7da, #721c24); } This lets you reuse the same style pattern with different colors.

Result

The card and alert classes get different background and text colors but share the same style structure.

Using parameters in mixins makes your styles flexible and ready for multiple themes.

4

Intermediate

Defining Light and Dark Theme Variables

🤔Before reading on: do you think defining separate variables for each theme is better than hardcoding colors? Commit to yes or no.

Concept: Store colors for each theme in separate variables to switch themes easily.

Define variables for light and dark themes: // Light theme $bg-light: #ffffff; $text-light: #222222; // Dark theme $bg-dark: #222222; $text-dark: #eeeeee; Then use these in mixins or styles to apply the correct colors.

Result

You have two sets of colors ready to apply depending on the theme choice.

Separating theme colors into variables makes switching themes a simple variable swap.

5

Intermediate

Applying Theme Mixins Conditionally

🤔Before reading on: can Sass decide which theme to apply based on a variable? Commit to yes or no.

Concept: Use Sass control directives to apply different theme styles based on a theme variable.

Set a theme variable and use @if to choose styles: $theme: light; // or dark @mixin apply-theme { @if $theme == light { background-color: $bg-light; color: $text-light; } @else if $theme == dark { background-color: $bg-dark; color: $text-dark; } } body { @include apply-theme; } Changing $theme changes the body colors.

Result

The body background and text colors update automatically when $theme changes.

Conditional logic in mixins lets you switch themes by changing just one variable.

6

Advanced

Building Scalable Theme Mixins Structure

🤔Before reading on: do you think nesting mixins or using maps can help manage many theme properties? Commit to yes or no.

Concept: Organize theme properties using Sass maps and nested mixins for scalable theming.

Use maps to store theme colors: $themes: ( light: ( bg: #fff, text: #222 ), dark: ( bg: #222, text: #eee ) ); @mixin theme($name) { background-color: map-get(map-get($themes, $name), bg); color: map-get(map-get($themes, $name), text); } body { @include theme(light); } This approach scales well for many themes and properties.

Result

You can add new themes or properties by updating the map without changing mixin code.

Using maps and nested mixins creates a clean, maintainable theming system for large projects.

7

Expert

Integrating Theming Mixins with CSS Custom Properties

🤔Before reading on: do you think Sass theming can work together with CSS variables for runtime theme switching? Commit to yes or no.

Concept: Combine Sass mixins with CSS custom properties to enable dynamic theme changes in the browser.

Define CSS variables inside Sass mixins: @mixin theme-css-vars($bg, $text) { --bg-color: #{$bg}; --text-color: #{$text}; } body.light { @include theme-css-vars(#fff, #222); } body.dark { @include theme-css-vars(#222, #eee); } Then use var(--bg-color) in your CSS for colors. JavaScript can toggle body classes to switch themes without recompiling Sass.

Result

Themes can switch instantly in the browser by toggling classes, combining Sass power with CSS variables.

Knowing how to blend Sass and CSS variables unlocks dynamic theming beyond static compile-time styles.

Under the Hood

Sass mixins are processed at compile time, meaning the Sass compiler replaces mixin calls with the actual CSS code they generate. When you use parameters or conditional logic, Sass evaluates these during compilation to produce the final CSS. CSS custom properties, however, exist at runtime in the browser, allowing styles to change dynamically without recompiling. Combining Sass mixins with CSS variables means Sass sets up the CSS variables, and the browser uses them to switch themes on the fly.

Why designed this way?

Sass was designed to extend CSS with programming features like variables and mixins to reduce repetition and improve maintainability. The compile-time approach ensures compatibility with all browsers by outputting plain CSS. CSS custom properties were introduced later to allow runtime flexibility, so combining both leverages the strengths of each: Sass for structure and CSS variables for dynamic behavior.

Sass Source Code
     │
     ▼
[Sass Compiler]
     │ (process mixins, variables, logic)
     ▼
   CSS Output
     │
     ▼
Browser Runtime
     │ (CSS variables used here for dynamic themes)
     ▼
Visual Styles on Page

Myth Busters - 4 Common Misconceptions

Quick: Do you think Sass mixins can change styles dynamically in the browser after compilation? Commit to yes or no.

Common Belief: Sass mixins can change styles dynamically in the browser like JavaScript can.

Reality: Sass mixins only work at compile time and cannot change styles after the CSS is generated.

Why it matters: Believing mixins work dynamically leads to confusion when theme changes don’t happen without page reload or recompilation.

Quick: Do you think using many mixins always makes CSS smaller and faster? Commit to yes or no.

Common Belief: More mixins always reduce CSS size and improve performance.

Reality: Overusing mixins can generate repeated CSS code, increasing file size if not managed carefully.

Why it matters: Ignoring this can cause bloated CSS files, slowing page load and hurting user experience.

Quick: Do you think CSS custom properties and Sass variables are the same? Commit to yes or no.

Common Belief: Sass variables and CSS custom properties are interchangeable and behave the same.

Reality: Sass variables exist only during compilation; CSS custom properties exist in the browser and can change at runtime.

Why it matters: Confusing these leads to wrong expectations about when and how styles update.

Quick: Do you think theming mixins must always use parameters? Commit to yes or no.

Common Belief: All theming mixins require parameters to work.

Reality: Some theming mixins use global variables or maps without parameters for cleaner code.

Why it matters: Thinking parameters are mandatory limits design choices and can complicate simple theming setups.

Expert Zone

1

Using Sass maps for themes allows grouping related properties, making it easier to add or modify themes without changing mixin logic.

2

Combining Sass mixins with CSS custom properties enables runtime theme switching, but requires careful fallback strategies for older browsers.

3

Overusing conditional logic inside mixins can make Sass code hard to read and maintain; sometimes splitting themes into separate files is cleaner.

When NOT to use

Avoid theming with mixins when your project requires real-time theme switching without page reloads and you cannot use CSS custom properties. In such cases, rely more on CSS variables and JavaScript for dynamic styling. Also, for very simple projects, plain CSS variables without Sass may be sufficient.

Production Patterns

In production, theming mixins are often combined with design tokens stored in JSON or Sass maps, enabling consistent branding across apps. Teams use build tools to generate theme-specific CSS files or leverage CSS variables for runtime switching. Mixins are also used to enforce design system rules, ensuring all components follow theme guidelines.

Connections

CSS Custom Properties

Builds-on

Understanding Sass theming mixins helps grasp how CSS variables can be set up for dynamic theme changes, bridging compile-time and runtime styling.

Design Systems

Same pattern

Theming with mixins is a practical way to implement design tokens and consistent styles across components, a core idea in design systems.

Software Configuration Management

Analogous pattern

Just like theming mixins manage style variations through parameters and variables, configuration management controls software behavior through settings, showing a shared principle of flexible, reusable configurations.

Common Pitfalls

#1 Hardcoding colors inside mixins instead of using variables.

Wrong approach:

@mixin theme-style {
background-color: #ffffff;
color: #000000;
}

body {
@include theme-style;
}

Correct approach:

$bg-color: #ffffff;
$text-color: #000000;

@mixin theme-style {
background-color: $bg-color;
color: $text-color;
}

body {
@include theme-style;
}

Root cause:

Not using variables reduces flexibility and makes theme changes require editing multiple places.

#2 Using mixins to generate large repeated CSS blocks without parameters.

Wrong approach:

@mixin big-style {
border: 1px solid black;
padding: 10px;
margin: 10px;
font-size: 1rem;
}

.card {
@include big-style;
}
.alert {
@include big-style;
}

Correct approach:

@mixin big-style($border-color) {
border: 1px solid $border-color;
padding: 10px;
margin: 10px;
font-size: 1rem;
}

.card {
@include big-style(black);
}
.alert {
@include big-style(red);
}

Root cause:

Not parameterizing mixins causes duplicated CSS, increasing file size.

#3 Trying to switch themes by changing Sass variables at runtime.

Wrong approach:

$theme-color: blue;

body {
background-color: $theme-color;
}

// Attempting to change $theme-color with JavaScript at runtime (which is impossible)

Correct approach:

body.light {
--bg-color: white;
--text-color: black;
}
body.dark {
--bg-color: black;
--text-color: white;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
}

// Use JavaScript to toggle body.light and body.dark classes

Root cause:

Misunderstanding that Sass variables are compile-time only and cannot be changed in the browser.

Key Takeaways

Theming with mixins uses reusable style blocks that adapt based on variables or parameters to create flexible, consistent designs.

Sass mixins work at compile time, so dynamic theme switching requires combining them with CSS custom properties for runtime flexibility.

Organizing theme colors and properties with variables and maps makes scaling and maintaining themes easier and less error-prone.

Misusing mixins by hardcoding values or overusing them without parameters can lead to bloated CSS and maintenance headaches.

Understanding the difference between Sass variables and CSS custom properties is key to building effective, dynamic theming systems.