Extending vs mixing comparison in SASS - When to Use Which

The Big Idea

Discover how a small Sass trick can save you hours of repetitive styling work!

The Scenario

Imagine you have many buttons on your website, each with slightly different colors but mostly the same style. You write the same style rules again and again for each button.

The Problem

Writing repeated styles manually wastes time and makes your code long and hard to update. If you want to change the common style, you must edit every button's code separately, risking mistakes and inconsistency.

The Solution

Using extending or mixins in Sass lets you share styles easily. You write common styles once and reuse them, so your code stays clean and changes apply everywhere automatically.

Before vs After

✗ Before

.btn-primary { color: white; background: blue; padding: 1rem; }
.btn-secondary { color: white; background: gray; padding: 1rem; }

✓ After

@mixin button-style { color: white; padding: 1rem; }
.btn-primary { @include button-style; background: blue; }
.btn-secondary { @include button-style; background: gray; }

What It Enables

You can build consistent, easy-to-maintain styles that save time and reduce errors across your whole website.

Real Life Example

A design system with many components sharing base styles but needing small differences uses mixins or extends to keep code DRY and updates simple.

Key Takeaways

Manual repetition wastes time and causes errors.

Extending and mixins share styles to keep code clean.

They make updates fast and consistent across many elements.