sass
Uitbreiden / Overerving

Syntaxis

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

parameters

Opmerkingen

Een klasse uitbreiden

.message
  color: white

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

Dit neemt alle stijlen van .message en voegt ze toe aan .message-important . Het genereert de volgende CSS:

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

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

Uitbreiden van meerdere klassen

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

In de bovenstaande code wordt @extend op één regel gebruikt om de code van meerdere klassen toe te voegen aan .message-important . Het is echter mogelijk om één verlenging per regel als volgt te gebruiken:

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

Elk van deze methoden genereert de volgende CSS:

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

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

Chaining breidt uit

.message
  color: white
  background: black

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

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

Deze code zorgt ervoor dat .message-error zich uitstrekt van .message-important , wat betekent dat het code bevat van zowel .message-important als .message , omdat .method-important zich uitstrekt van .message . Dit resulteert in de volgende CSS:

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

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

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

Disclaimer: zorg ervoor dat de klasse (s) waarvan u uitbreidt slechts één keer in de code voorkomt, anders kan Sass een rommelige, ingewikkelde CSS genereren.

Optioneel Verlengt

Soms wilt u misschien dat een @extend optioneel is en niet vereist dat de opgegeven klasse in uw code @extend .

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

Dit resulteert in de volgende CSS:

.message-important {
  background: red;
}

Disclaimer: dit is handig tijdens de ontwikkeling wanneer u misschien nog niet al uw code hebt geschreven en geen fouten wilt, maar deze moet waarschijnlijk in de productie worden verwijderd omdat dit tot onverwachte resultaten kan leiden.

placeholders

Soms maakt u klassen die op zichzelf niet worden gebruikt, maar eerder worden uitgebreid binnen andere regelsets. Dit betekent dat het gecompileerde CSS-bestand groter is dan nodig is. Placeholder-selectors lossen dit probleem op.

Placeholder-selectors zijn vergelijkbaar met class-selectors, maar ze gebruiken het procentteken (%) in plaats van de (.) Die voor klassen wordt gebruikt. Ze worden niet weergegeven in de gecompileerde 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;
}

Dit compileert naar de volgende CSS:

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

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

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

De ouder verlengen

Doorgaans proberen we de ouder zo uit te breiden:

.parent {
  style: value;

  @extend &;
}

Zal resulteren in een foutmelding dat de ouder niet kan worden verlengd. Dit is logisch, maar er is een oplossing. Sla de ouderkiezer eenvoudig op in een variabele.

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

Er is geen voordeel om dit in het bovenstaande voorbeeld te doen, maar dit geeft je de mogelijkheid om ouderstijlen te verpakken vanuit een meegeleverde mixin.