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.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Stel mij vragen over dit onderwerp
Vat dit hoofdstuk samen
Toon voorbeelden uit de praktijk
Awesome!
Completion rate improved to 2.04
Extending Styles with the @extend Directive
Veeg om het menu te tonen
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.
Bedankt voor je feedback!