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.
Awesome!
Completion rate improved to 2.04
Stijlen 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!