sass
Förläng / arv

Syntax

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

parametrar

Anmärkningar

Förläng en klass

.message
  color: white

.message-important
  @extend .message
  background-color: red

Detta tar alla stilar från .message och lägger dem till .message-important . Det genererar följande CSS:

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

Förlängning från flera klasser

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

I ovanstående kod används @extend i en rad för att lägga till flera klasser kod till .message-important , men det är möjligt att använda en utvidgning per rad som denna:

.message-important
    @extend .message
    @extend .important

Endera av dessa metoder genererar följande CSS:

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

Kedjan förlängs

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

Denna kod gör att .message-error sträcker sig från .message-important , vilket innebär att den kommer att innehålla kod från både .message-important och .message , eftersom .method-important sträcker sig från .message . Detta resulterar i följande CSS:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

Ansvarsfriskrivning: Se till att klassen (erna) du utökar från endast inträffar en gång i koden, annars kan Sass generera en smutsig, veckad CSS.

Valfritt förlängningar

Ibland kanske du vill att en @extend ska vara valfri och inte kräva att den angivna klassen finns i din kod.

.message-important
  @extend .message !optional
  background: red

Detta kommer att resultera i följande CSS:

.message-important {
  background: red;
}

Ansvarsfriskrivning: Detta är användbart under utveckling när du kanske inte har skrivit all din kod ännu och inte vill ha fel, men den borde förmodligen tas bort i produktionen eftersom den kan leda till oväntade resultat.

Platshållare

Ibland skapar du klasser som inte kommer att användas i sig, utan bara utvidgas i andra regeluppsättningar. Detta innebär att den sammanställda CSS-filen blir större än den behöver. Platshållarväljare löser detta problem.

Platshållarväljare liknar klassväljare, men de använder procenttecknet (%) istället för (.) Som används för klasser. De kommer inte att dyka upp i den sammanställda CSS.

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

Detta kommer att sammanställas till följande CSS:

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

Utöka föräldern

Försöker vanligtvis att förlänga föräldern så:

.parent {
  style: value;

  @extend &;
}

Kommer att resultera i ett fel med uppgift att föräldern inte kan förlängas. Det är meningsfullt, men det finns en lösning. Förvara helt enkelt överväljarväljaren i en variabel.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

Det finns ingen fördel med att göra detta i exemplet ovan, men detta ger dig kraften att förpacka överordnade stilar från en inkluderad mixin.