Extend limitations and gotchas in SASS - Mini Project: Build & Apply

Understanding Sass @extend Limitations and Gotchas

📖 Scenario: You are working on a website's styles using Sass. You want to reuse styles efficiently but need to understand how @extend works and its limitations to avoid unexpected results.

🎯 Goal: Build a small Sass stylesheet that demonstrates how @extend works, shows its limitations, and how to avoid common gotchas.

📋 What You'll Learn

Create base styles for buttons

Use @extend to reuse button styles

Add a configuration variable to control a style condition

Show how extending multiple selectors can cause unexpected CSS output

Add a final style to fix or clarify the extension behavior

💡 Why This Matters

🌍 Real World

In real projects, reusing styles saves time and keeps CSS consistent. Understanding @extend helps avoid messy CSS and unexpected selector combinations.

💼 Career

Front-end developers often use Sass for styling. Knowing @extend limitations helps write clean, maintainable stylesheets and debug CSS issues.

1

Create base button styles

Create a Sass class called .button with these styles: padding: 1rem 2rem;, border-radius: 0.5rem;, and background-color: blue;.

SASS

# Create a .button class with padding, border-radius, and background-color

// Your code here

Hint

Use .button { ... } and add the styles inside the curly braces.

2

Add a config variable for button color

Create a Sass variable called $primary-color and set it to blue. Then update the background-color in .button to use $primary-color.

SASS

$primary-color: blue;

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: $primary-color;
  // Your code here
}

Hint

Define $primary-color before using it in .button.

3

Use @extend and show multiple selector extension

Create a class .primary-button that uses @extend .button. Then create a class .alert with color: red;. Finally, create a class .alert-button that extends both .button and .alert using two @extend statements.

SASS

$primary-color: blue;

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: $primary-color;
}

// Your code here

Hint

Use @extend inside the classes to reuse styles.

4

Add a final style to clarify extension behavior

Add a style for .alert-button that sets font-weight: bold; to show how you can add extra styles after extending multiple selectors.

SASS

$primary-color: blue;

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: $primary-color;
}

.primary-button {
  @extend .button;
}

.alert {
  color: red;
}

.alert-button {
  @extend .button;
  @extend .alert;
  // Your code here
}

Hint

You can add normal styles after using @extend to customize the class.