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
Awesome!
Completion rate improved to 2.04
Utö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!