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.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Awesome!
Completion rate improved to 2.04
Extending Styles with the @extend Directive
Swipe to show menu
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.
Thanks for your feedback!