Utvidelse av Stiler med @extend-direktivet
Den fjerde nyttige funksjonen lar oss bruke forhåndsdefinerte CSS-egenskaper fra ett element på et annet, og skaper et forhold mellom selektorer. Dette betyr at én selektor kan arve egenskapene til en annen selektor.
La oss nå se på bildet nedenfor, som viser to knappelementer:
Vi har to knapper: "send" og "submit." Den eneste forskjellen mellom disse elementene er verdien til background-color-egenskapen. Derfor kan vi definere stilene for "send"-knappen og la "submit"-knappen arve disse stilene.
HTML-koden er:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
La oss se hvordan vi kan arve stiler ved hjelp 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;
}
Selektoren .submit-button arver alle stilene fra selektoren .send-button ved å bruke @extend-direktivet.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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.04Utvidelse av Stiler med @extend-direktivet
Sveip for å vise menyen
Den fjerde nyttige funksjonen lar oss bruke forhåndsdefinerte CSS-egenskaper fra ett element på et annet, og skaper et forhold mellom selektorer. Dette betyr at én selektor kan arve egenskapene til en annen selektor.
La oss nå se på bildet nedenfor, som viser to knappelementer:
Vi har to knapper: "send" og "submit." Den eneste forskjellen mellom disse elementene er verdien til background-color-egenskapen. Derfor kan vi definere stilene for "send"-knappen og la "submit"-knappen arve disse stilene.
HTML-koden er:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
La oss se hvordan vi kan arve stiler ved hjelp 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;
}
Selektoren .submit-button arver alle stilene fra selektoren .send-button ved å bruke @extend-direktivet.
Takk for tilbakemeldingene dine!
