Chained extensions in SASS - Mini Project: Build & Apply

Chained Extensions with Sass

📖 Scenario: You are creating a simple style system for buttons on a website. You want to reuse styles by extending base button styles and then adding more specific styles for different button types.

🎯 Goal: Build Sass code that uses chained @extend directives to share styles between button classes, making the CSS clean and easy to maintain.

📋 What You'll Learn

Create a base button style class called .btn with common button styles.

Create a class .btn-primary that extends .btn and adds a blue background.

Create a class .btn-large that extends .btn-primary and adds larger padding and font size.

Use chained @extend so that .btn-large inherits styles from both .btn-primary and .btn.

💡 Why This Matters

🌍 Real World

Web developers often need to create consistent button styles that share common features but differ in color or size. Using chained extensions in Sass helps manage these styles efficiently.

💼 Career

Knowing how to use Sass @extend and chain extensions is valuable for front-end developers to write maintainable and scalable CSS in professional projects.

1

Create the base button style

Create a Sass class called .btn with these styles: padding: 0.5rem 1rem;, border: none;, and border-radius: 0.25rem;.

SASS

// Your code here

Hint

Use .btn { ... } to define the base button styles.

2

Create the primary button style extending base button

Create a Sass class called .btn-primary that uses @extend .btn; and adds background-color: #007bff; and color: white;.

SASS

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
}

// Your code here

Hint

Use @extend .btn; inside .btn-primary to reuse base styles.

3

Create the large button style extending primary button

Create a Sass class called .btn-large that uses @extend .btn-primary; and adds padding: 1rem 2rem; and font-size: 1.25rem;.

SASS

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
}

.btn-primary {
  @extend .btn;
  background-color: #007bff;
  color: white;
}

// Your code here

Hint

Use @extend .btn-primary; inside .btn-large to chain extensions.

4

Complete the chained extension structure

Ensure the Sass code includes all three classes: .btn, .btn-primary extending .btn, and .btn-large extending .btn-primary with their respective styles.

SASS

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
}

.btn-primary {
  @extend .btn;
  background-color: #007bff;
  color: white;
}

.btn-large {
  @extend .btn-primary;
  padding: 1rem 2rem;
  font-size: 1.25rem;
}

// Review and finalize your code

Hint

Check that all classes and @extend statements are present and correct.