Academy / Advanced Level: HTML and CSS

CSS Preprocessors: SASS/SCSS

Inheritance with @extend

The @extend directive allows you to share common styles between multiple selectors. This helps reduce redundancy by enabling one selector to inherit styles from another.

Example of @extend:

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
}

.button-primary {
  @extend .button; /* Inherits all styles from .button */
  background-color: #2ecc71;
}

In this example:

• The .button-primary class extends the .button class, inheriting its padding and color styles, but overrides the background color with a new value.