Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Stijlen Uitbreiden met de @extend-Directive | CSS-Preprocessors en Sass
Geavanceerde CSS-Technieken

bookStijlen 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.

question mark

Wat doet de @extend in Sass?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 7. Hoofdstuk 6

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.04

bookStijlen 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.

question mark

Wat doet de @extend in Sass?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 7. Hoofdstuk 6
some-alt