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.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.04
Extending Styles with the @extend Directive
Stryg for at vise menuen
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.
Tak for dine kommentarer!