Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Utvidelse av Stiler med @extend-direktivet | CSS-forprosessorer og Sass
Avanserte CSS-teknikker

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

question mark

Hva gjør @extend i Sass?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 7. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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?

Awesome!

Completion rate improved to 2.04

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

question mark

Hva gjør @extend i Sass?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 7. Kapittel 6
some-alt