Why extending reduces duplication in SASS - See It in Action

Why Extending Reduces Duplication in Sass

📖 Scenario: You are creating styles for a website with multiple button types. Many buttons share common styles, but each also has unique colors. Instead of repeating the shared styles for each button, you will use Sass @extend to reduce duplication.

🎯 Goal: Build Sass code that uses @extend to share common button styles among different button classes, reducing repeated CSS rules.

📋 What You'll Learn

Create a base button style class with common properties

Create a variable for the primary color

Use @extend to apply base styles to specific button classes

Add unique background colors to each button class

💡 Why This Matters

🌍 Real World

Web developers often style many similar elements like buttons. Using @extend helps keep CSS clean and easier to maintain by sharing common styles.

💼 Career

Knowing how to reduce duplication in stylesheets is important for front-end developers to write efficient, scalable CSS or Sass code.

1

Create base button styles

Create a Sass class called .btn with these exact properties: padding: 1rem 2rem;, border-radius: 0.5rem;, and font-weight: bold;

SASS

// Create the .btn class with common button styles
// Your code here

Hint

Think of .btn as the base style all buttons will share.

2

Add a primary color variable

Create a Sass variable called $primary-color and set it to #3498db

SASS

.btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

// Define the primary color variable
// Your code here

Hint

Variables start with $ in Sass.

3

Create specific button classes using @extend

Create two classes: .btn-primary and .btn-secondary. Use @extend .btn; inside each to reuse the base styles. Then set background-color: $primary-color; for .btn-primary and background-color: #95a5a6; for .btn-secondary

SASS

.btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

$primary-color: #3498db;

// Create .btn-primary and .btn-secondary classes with @extend and background colors
// Your code here

Hint

Use @extend .btn; inside each button class to reuse styles.

4

Add hover effect to base button

Inside the .btn class, add a hover style using &:hover that changes opacity to 0.8

SASS

.btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;

  // Add hover effect here
  // Your code here
}

$primary-color: #3498db;

.btn-primary {
  @extend .btn;
  background-color: $primary-color;
}

.btn-secondary {
  @extend .btn;
  background-color: #95a5a6;
}

Hint

Use &:hover inside .btn to add hover styles.