Stijlen Uitbreiden met de @extend-Directive
De vierde nuttige functie stelt ons in staat om vooraf ingestelde CSS-eigenschappen van het ene element op een ander element toe te passen, waardoor er een relatie tussen selectors ontstaat. Dit betekent dat de ene selector de eigenschappen van een andere selector kan overnemen.
Bekijk nu de onderstaande afbeelding, waarop twee knop-elementen worden weergegeven:
We hebben twee knoppen: "send" en "submit." Het enige verschil tussen deze elementen is de waarde van de eigenschap background-color. Daarom kunnen we de stijlen voor de "send"-knop definiëren en de "submit"-knop deze stijlen laten overnemen.
De html-code is:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Laten we bekijken hoe we stijlen kunnen overnemen met behulp van 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;
}
De .submit-button selector neemt alle stijlen van de .send-button selector over met behulp van de @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.
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.04Stijlen Uitbreiden met de @extend-Directive
Veeg om het menu te tonen
De vierde nuttige functie stelt ons in staat om vooraf ingestelde CSS-eigenschappen van het ene element op een ander element toe te passen, waardoor er een relatie tussen selectors ontstaat. Dit betekent dat de ene selector de eigenschappen van een andere selector kan overnemen.
Bekijk nu de onderstaande afbeelding, waarop twee knop-elementen worden weergegeven:
We hebben twee knoppen: "send" en "submit." Het enige verschil tussen deze elementen is de waarde van de eigenschap background-color. Daarom kunnen we de stijlen voor de "send"-knop definiëren en de "submit"-knop deze stijlen laten overnemen.
De html-code is:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Laten we bekijken hoe we stijlen kunnen overnemen met behulp van 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;
}
De .submit-button selector neemt alle stijlen van de .send-button selector over met behulp van de @extend directive.
Bedankt voor je feedback!
