Why mixins eliminate duplication in SASS - The Real Reasons

The Big Idea

What if you could fix a style once and see it change everywhere instantly?

The Scenario

Imagine you are styling many buttons on a website. You write the same color, padding, and border styles again and again for each button.

The Problem

If you want to change the button style later, you must find and update every single place manually. This is slow and easy to forget, causing inconsistent styles.

The Solution

Mixins let you write the button styles once and reuse them everywhere. Change the mixin once, and all buttons update automatically.

Before vs After

✗ Before

button1 { color: blue; padding: 1rem; border: 1px solid black; }
button2 { color: blue; padding: 1rem; border: 1px solid black; }

✓ After

@mixin button-style { color: blue; padding: 1rem; border: 1px solid black; }
button1 { @include button-style; }
button2 { @include button-style; }

What It Enables

You can keep your styles consistent and update them quickly across your whole site with just one change.

Real Life Example

A website with many buttons, cards, or alerts that share the same look but appear in different places benefits from mixins to keep design uniform and easy to maintain.

Key Takeaways

Writing styles once and reusing saves time.

Mixins prevent mistakes from copying code everywhere.

Updating styles becomes fast and reliable.