Why Placeholder selectors with % in SASS? - Purpose & Use Cases

The Big Idea

What if you could fix all your button styles by changing just one line of code?

The Scenario

Imagine you are styling many buttons on a website. You want them all to share the same basic look, like color and padding, so you copy and paste the same CSS rules into each button style.

The Problem

When you want to change the shared style, you have to update every single button style manually. This is slow, easy to forget, and can cause inconsistent designs.

The Solution

Placeholder selectors with % let you write shared styles once and reuse them by extending. This means you keep your code clean and easy to update.

Before vs After

✗ Before

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

✓ After

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

What It Enables

You can create reusable style blocks that keep your CSS DRY (Don't Repeat Yourself) and easy to maintain.

Real Life Example

On a website with many types of buttons, you can change the base button style in one place, and all buttons update automatically.

Key Takeaways

Copy-pasting styles is slow and error-prone.

Placeholder selectors let you write shared styles once.

Extending placeholders keeps your CSS clean and easy to update.