Utöka Stilar med @extend-direktivet
Den fjärde användbara funktionen gör det möjligt att tillämpa förinställda CSS-egenskaper från ett element till ett annat, vilket skapar en relation mellan selektorer. Detta innebär att en selektor kan ärva egenskaper från en annan selektor.
Titta nu på bilden nedan, som visar två knappelement:
Vi har två knappar: "send" och "submit." Den enda skillnaden mellan dessa element är värdet på egenskapen background-color. Därför kan vi definiera stilarna för "send"-knappen och låta "submit"-knappen ärva dessa stilar.
HTML-koden är:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Låt oss se hur vi kan ärva stilar med hjälp av 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;
}
Selektorn .submit-button ärver alla stilar från selektorn .send-button med hjälp av direktivet @extend.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you explain how the @extend directive works in more detail?
Are there any limitations or drawbacks to using @extend in Sass?
Can you show an example of how to override other properties besides background-color?
Awesome!
Completion rate improved to 2.04Utöka Stilar med @extend-direktivet
Svep för att visa menyn
Den fjärde användbara funktionen gör det möjligt att tillämpa förinställda CSS-egenskaper från ett element till ett annat, vilket skapar en relation mellan selektorer. Detta innebär att en selektor kan ärva egenskaper från en annan selektor.
Titta nu på bilden nedan, som visar två knappelement:
Vi har två knappar: "send" och "submit." Den enda skillnaden mellan dessa element är värdet på egenskapen background-color. Därför kan vi definiera stilarna för "send"-knappen och låta "submit"-knappen ärva dessa stilar.
HTML-koden är:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Låt oss se hur vi kan ärva stilar med hjälp av 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;
}
Selektorn .submit-button ärver alla stilar från selektorn .send-button med hjälp av direktivet @extend.
Tack för dina kommentarer!
