Why Chained extensions in SASS? - Purpose & Use Cases

The Big Idea

Discover how one small change can update many styles at once without repeating yourself!

The Scenario

Imagine you have several button styles that share common parts. You write the same CSS rules again and again for each button type.

The Problem

When you want to change a shared style, you must update every button style manually. This wastes time and can cause mistakes or inconsistencies.

The Solution

Chained extensions let you write shared styles once and extend them step-by-step. This keeps your code DRY and easy to update.

Before vs After

✗ Before

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

✓ After

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

What It Enables

You can build complex style hierarchies that are easy to maintain and update with just a few changes.

Real Life Example

In a website with many button types, chained extensions let you update padding or font color once and see it apply everywhere instantly.

Key Takeaways

Writing shared styles once saves time and reduces errors.

Chained extensions let styles build on each other cleanly.

Maintaining large style systems becomes simpler and faster.