Extending Styles with the @extend Directive

The fourth helpful feature allows us to apply preset CSS properties from one element to another, creating a relationship between selectors. This means that one selector can inherit the properties of another selector.

Now, let's take a look at the image below, which shows two button elements:

We have two buttons: "send" and "submit." The only distinction between these elements is the value of the background-color property. Therefore, we can define the styles for the "send" button and have the "submit" button inherit those styles.

The html code is:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Let's see how we can inherit styles with the help of sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

The .submit-button selector inherits all of the styles from the .send-button selector using the @extend directive.