Why @extend directive in SASS? - Purpose & Use Cases

The Big Idea

Discover how one simple directive can save you hours of tedious CSS updates!

The Scenario

Imagine you are styling a website with many buttons that share similar styles. You copy and paste the same CSS rules for each button type manually.

The Problem

When you want to change a common style, you have to update every copied block. This is slow, error-prone, and can cause inconsistent styles if you miss one.

The Solution

The @extend directive lets you share styles by extending existing selectors. Change the base style once, and all extended selectors update automatically.

Before vs After

✗ Before

.btn-primary { color: white; background: blue; }
.btn-secondary { color: white; background: gray; }
.btn-primary-large { color: white; background: blue; font-size: 1.5rem; }

✓ After

.btn-base { color: white; }
.btn-primary { @extend .btn-base; background: blue; }
.btn-secondary { @extend .btn-base; background: gray; }
.btn-primary-large { @extend .btn-primary; font-size: 1.5rem; }

What It Enables

You can write cleaner, DRY (Don't Repeat Yourself) styles that are easier to maintain and update across your whole site.

Real Life Example

On a large website, you want all buttons to share the same font and padding but differ in colors. Using @extend, you define these shared styles once and extend them for each button type.

Key Takeaways

Manually copying styles leads to mistakes and extra work.

@extend shares styles between selectors efficiently.

It helps keep your CSS clean, consistent, and easy to update.