Avoiding selector bloat from @extend in SASS - Mini Project: Build & Apply

Avoiding selector bloat from @extend in Sass

📖 Scenario: You are creating styles for a simple website with buttons. You want to reuse some button styles without making your CSS selectors too long or repeated.

🎯 Goal: Build Sass code that uses @extend carefully to avoid creating very long combined selectors in the final CSS.

📋 What You'll Learn

Create a base button style class

Create a secondary button style class that extends the base button

Add a special button style that extends the secondary button

Use placeholder selectors to avoid selector bloat

💡 Why This Matters

🌍 Real World

Web developers often reuse button styles across a website. Using @extend with placeholders helps keep CSS clean and efficient.

💼 Career

Understanding how to avoid selector bloat with @extend is important for writing maintainable Sass in professional front-end development.

1

Create base button style

Create a placeholder selector called %button-base with these styles: padding: 1rem;, border-radius: 0.5rem;, and font-weight: bold;

SASS

# Your code here

Need a hint?

Use %button-base as a placeholder selector with @extend later.

2

Create secondary button style extending base

Create a class selector called .btn-secondary that @extends %button-base and adds background-color: lightgray; and color: black;

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

# Your code here

Need a hint?

Use @extend %button-base; inside .btn-secondary.

3

Create special button style extending secondary

Create a class selector called .btn-special that @extends .btn-secondary and adds border: 2px solid blue;

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.btn-secondary {
  @extend %button-base;
  background-color: lightgray;
  color: black;
}

# Your code here

Need a hint?

Extend .btn-secondary inside .btn-special to reuse styles.

4

Add a button class that uses the base placeholder

Create a class selector called .btn that @extends %button-base and adds background-color: blue; and color: white;

SASS

%button-base {
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.btn-secondary {
  @extend %button-base;
  background-color: lightgray;
  color: black;
}

.btn-special {
  @extend .btn-secondary;
  border: 2px solid blue;
}

# Your code here

Need a hint?

Use @extend %button-base; inside .btn to reuse base styles without selector bloat.