Another great feature of Sass is inheritance. We implement this using the @extend directive.

Inheritance is a feature of SASS that allows multiple classes to share a common set of properties with one another.

An Example

Some typical CSS code for styling a button:

.button {
  background-color: #0000FF; // Blue
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}

If we happen to have a number of buttons on our website, all of which are styled in a similar manner, we would have a good case for inheritance!

We would implement a secondary button via inheritance like so:

.button-secondary {
  @extend .button;
  background-color: #4CAF50; // Green
}  

Our .button-secondary class will take on all of the properties and values set the .button class, with the exception of background-color which we’ve decided to set to green.

The use of inheritance helps us to keep our code neat, clean and focused on constructing reusable components.

Up next in this series, we’ll take a look at the & operator.

Related Posts: