Why Extend limitations and gotchas in SASS? - Purpose & Use Cases

The Big Idea

Discover why copying styles feels easy at first but becomes a nightmare as your project grows.

The Scenario

Imagine you have many button styles that share some colors and shapes. You try to copy and paste the same styles into each button's code.

The Problem

If you change a color or shape, you must find and update every button style manually. This wastes time and can cause mistakes or inconsistent designs.

The Solution

Sass's @extend lets you reuse styles by linking selectors. Change the shared style once, and all buttons update automatically.

Before vs After

✗ Before

.btn-primary { background: blue; border-radius: 5px; }
.btn-secondary { background: blue; border-radius: 5px; }

✓ After

.btn-primary { background: blue; border-radius: 5px; }
.btn-secondary { @extend .btn-primary; }

What It Enables

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

Real Life Example

A website with many buttons and alerts can share base styles. When the brand color changes, update one place and all related elements update instantly.

Key Takeaways

Manual copying of styles is slow and error-prone.

@extend links selectors to share styles efficiently.

Maintaining and updating styles becomes faster and safer.