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:

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

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