Lære Udvidelse af Stilarter med @extend-direktivet

Den fjerde nyttige funktion gør det muligt at anvende forudindstillede CSS-egenskaber fra ét element til et andet, hvilket skaber en relation mellem selektorer. Dette betyder, at én selektor kan arve egenskaberne fra en anden selektor.

Lad os nu se på billedet nedenfor, som viser to knap-elementer:

Vi har to knapper: "send" og "submit." Den eneste forskel mellem disse elementer er værdien af background-color-egenskaben. Derfor kan vi definere stilarterne for "send"-knappen og lade "submit"-knappen arve disse stilarter.

HTML-koden er:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Lad os se, hvordan vi kan arve stilarter ved hjælp af 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 stilarter fra selektoren .send-button ved hjælp af @extend-direktivet.

Var alt klart?

Tak for dine kommentarer!

Sektion 7. Kapitel 6

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

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?

Stryg for at vise menuen