Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utöka Stilar med @extend-direktivet | CSS-Förprocessorer och Sass
Avancerade CSS-tekniker

bookUtöka Stilar med @extend-direktivet

Den fjärde användbara funktionen gör det möjligt att tillämpa förinställda CSS-egenskaper från ett element till ett annat, vilket skapar en relation mellan selektorer. Detta innebär att en selektor kan ärva egenskaper från en annan selektor.

Titta nu på bilden nedan, som visar två knappelement:

Vi har två knappar: "send" och "submit." Den enda skillnaden mellan dessa element är värdet på egenskapen background-color. Därför kan vi definiera stilarna för "send"-knappen och låta "submit"-knappen ärva dessa stilar.

HTML-koden är:

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

Låt oss se hur vi kan ärva stilar med hjälp 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;
}

Selektorn .submit-button ärver alla stilar från selektorn .send-button med hjälp av direktivet @extend.

question mark

Vad gör @extend i Sass?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 7. Kapitel 6

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookUtöka Stilar med @extend-direktivet

Svep för att visa menyn

Den fjärde användbara funktionen gör det möjligt att tillämpa förinställda CSS-egenskaper från ett element till ett annat, vilket skapar en relation mellan selektorer. Detta innebär att en selektor kan ärva egenskaper från en annan selektor.

Titta nu på bilden nedan, som visar två knappelement:

Vi har två knappar: "send" och "submit." Den enda skillnaden mellan dessa element är värdet på egenskapen background-color. Därför kan vi definiera stilarna för "send"-knappen och låta "submit"-knappen ärva dessa stilar.

HTML-koden är:

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

Låt oss se hur vi kan ärva stilar med hjälp 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;
}

Selektorn .submit-button ärver alla stilar från selektorn .send-button med hjälp av direktivet @extend.

question mark

Vad gör @extend i Sass?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 7. Kapitel 6
some-alt