Why extending reduces duplication in SASS - The Real Reasons

The Big Idea

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

The Scenario

Imagine you are styling a website with many buttons that share similar colors and fonts. You write the same color and font styles again and again for each button type.

The Problem

When you want to change the button color, you have to find and update every single place manually. This is slow and easy to miss, causing inconsistent styles.

The Solution

Using extending in Sass lets you write shared styles once and reuse them. Change the shared style once, and all buttons update automatically.

Before vs After

✗ Before

.btn-primary { color: white; background: blue; font-weight: bold; }
.btn-secondary { color: white; background: gray; font-weight: bold; }

✓ After

%button-base { color: white; font-weight: bold; }
.btn-primary { @extend %button-base; background: blue; }
.btn-secondary { @extend %button-base; background: gray; }

What It Enables

You can keep your styles DRY (Don't Repeat Yourself), making your code easier to maintain and update.

Real Life Example

On a large website, you can create a base button style and extend it for all button variations, so changing the base updates every button instantly.

Key Takeaways

Writing shared styles once saves time and effort.

Extending reduces errors from repeated code.

Maintaining and updating styles becomes simple and fast.