Why Theming with mixins in SASS? - Purpose & Use Cases

The Big Idea

What if you could change your entire website's look by tweaking just one small piece of code?

The Scenario

Imagine you are designing a website with multiple color themes like light and dark. You write separate CSS rules for each color manually, repeating similar styles everywhere.

The Problem

When you want to change a color or add a new theme, you must find and update every single style manually. This is slow, error-prone, and easy to miss spots, causing inconsistent looks.

The Solution

Theming with mixins lets you write reusable style blocks that accept theme colors as inputs. You define your styles once and apply them with different colors easily, keeping your code clean and consistent.

Before vs After

✗ Before

button {
  background: white;
  color: black;
}

.dark-theme button {
  background: black;
  color: white;
}

✓ After

@mixin theme-button($bg, $color) {
  background: $bg;
  color: $color;
}

button {
  @include theme-button(white, black);
}

.dark-theme button {
  @include theme-button(black, white);
}

What It Enables

You can quickly switch themes or add new ones by changing just a few values, making your design flexible and easy to maintain.

Real Life Example

A company website that offers a light mode and dark mode toggle uses theming with mixins to keep button styles consistent and easy to update across all pages.

Key Takeaways

Manual theme styling is repetitive and error-prone.

Mixins let you reuse style patterns with different colors.

Theming with mixins makes your code cleaner and easier to update.