@extend directive in SASS - Mini Project: Build & Apply

Using the @extend Directive in Sass

📖 Scenario: You are creating a simple webpage with buttons that share common styles. Instead of repeating the same CSS rules, you want to use Sass's @extend directive to reuse styles efficiently.

🎯 Goal: Build Sass code that uses the @extend directive to share styles between button classes, reducing repetition and making the CSS easier to maintain.

📋 What You'll Learn

Create a base button style class called .btn with background color, padding, and border radius.

Create a secondary button class called .btn-secondary that extends .btn and adds a different background color.

Create a danger button class called .btn-danger that extends .btn and adds a red background color.

Use the @extend directive exactly as specified to share styles.

💡 Why This Matters

🌍 Real World

Using @extend helps keep CSS code DRY (Don't Repeat Yourself) and easier to maintain when multiple elements share common styles.

💼 Career

Front-end developers often use Sass features like @extend to write cleaner, more efficient stylesheets for websites and web apps.

1

Create the base button style

Create a Sass class called .btn with these exact styles: background-color: #007bff;, padding: 0.5rem 1rem;, and border-radius: 0.25rem;.

SASS

# Create the base button style class .btn
# Your code here

Hint

Use the .btn selector and add the styles inside curly braces.

2

Add the secondary button class

Create a Sass class called .btn-secondary that uses @extend .btn; and adds background-color: #6c757d;.

SASS

.btn {
  background-color: #007bff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

// Create .btn-secondary class that extends .btn
# Your code here

Hint

Use @extend .btn; inside the .btn-secondary class to reuse styles.

3

Add the danger button class

Create a Sass class called .btn-danger that uses @extend .btn; and adds background-color: #dc3545;.

SASS

.btn {
  background-color: #007bff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.btn-secondary {
  @extend .btn;
  background-color: #6c757d;
}

// Create .btn-danger class that extends .btn
# Your code here

Hint

Use @extend .btn; inside the .btn-danger class to reuse styles.

4

Complete with a hover effect on base button

Add a hover effect to the .btn class using &:hover that changes background-color to #0056b3.

SASS

.btn {
  background-color: #007bff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

  // Add hover effect here
  # Your code here
}

.btn-secondary {
  @extend .btn;
  background-color: #6c757d;
}

.btn-danger {
  @extend .btn;
  background-color: #dc3545;
}

Hint

Use &:hover inside .btn to add the hover style.