Avoiding Duplicate Code with @extend in SASS/SCSS

1. Introduction

In this tutorial, we'll explore how to use the @extend feature in SASS (Syntactically Awesome Stylesheets)/SCSS (Sassy CSS) to avoid duplicating code. SASS is a scripting language that is interpreted into CSS, and it brings several useful features to the table that standard CSS lacks.

The @extend directive allows one selector to inherit the styles of another selector, helping you to keep your code DRY (Don't Repeat Yourself) and easier to maintain.

What You Will Learn

• Understanding of the @extend directive in SASS/SCSS.
• How to use @extend to avoid code duplication.

Prerequisites

• Basic knowledge of CSS.
• An understanding of SASS/SCSS syntax and features.

2. Step-by-Step Guide

The @extend directive in SASS enables a selector to inherit the styles of another selector. It's like creating a relationship between two selectors where one selector inherits the characteristics of the other.

How @extend Works

Let's say we have a CSS class .btn with some styles. If we want another class, say .btn-primary, to have the same styles plus some additional styles, we would use the @extend directive like this:

.btn {
  padding: 10px;
  border-radius: 3px;
  font-size: 16px;
}

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

In the above example, .btn-primary will have the same padding, border-radius, and font-size as .btn, plus its own background-color and color.

3. Code Examples

Let's dive into some more practical examples.

Example 1: Basic Usage of @extend

.error {
  border: 1px solid red;
  color: red;
}

.seriousError {
  @extend .error;
  background-color: #fdd;
}

In the above code, .seriousError will inherit the styles of .error and add its own background-color.

Example 2: Extending Multiple Classes

You can extend multiple classes as well. Consider the following example:

.warning {
  border: 1px solid yellow;
  color: yellow;
}

.error {
  @extend .warning;
  border-color: red;
  color: red;
}

.seriousError {
  @extend .error;
  background-color: #fdd;
}

In this example, .seriousError inherits the styles of .error (which itself extends .warning), and adds its own background-color.

4. Summary

In this tutorial, we've learned how to use the @extend directive in SASS/SCSS to avoid duplicating code by allowing one selector to inherit the styles of another selector. This helps in maintaining cleaner and DRY code.

5. Practice Exercises

Exercise 1

Create a .container class with some styles and then create .container-fluid class that extends .container and adds its own styles.

Exercise 2

Create a .card class with some styles. From that, extend a .card-primary and .card-secondary class, each adding their own unique styles.

Exercise 3

Create a .btn class and extend it to .btn-primary, .btn-secondary, and .btn-danger, each having their own unique styles.

Hint: Make use of the @extend directive to inherit styles from the base class.