sass
Erweitern / Vererbung

Syntax

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

Parameter

Bemerkungen

Erweitern Sie eine Klasse

.message
  color: white

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

Dadurch werden alle Stile aus .message und zu .message-important . Es generiert das folgende CSS:

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

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

Erweitern Sie von mehreren Klassen

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

Im obigen Code wird @extend in einer Zeile verwendet, um den Code mehrerer Klassen zu .message-important hinzuzufügen. Es ist jedoch möglich, einen .message-important pro Zeile folgendermaßen zu verwenden:

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

Eine dieser Methoden generiert das folgende CSS:

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

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

Verkettung verlängert

.message
  color: white
  background: black

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

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

Dieser Code bewirkt, dass sich .message-error von .message-important , was bedeutet, dass er Code sowohl von .message-important als auch von .message , da .method-important von .message . Daraus ergibt sich folgendes CSS:

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

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

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

Haftungsausschluss: Stellen Sie sicher, dass die Klasse (n), von der Sie erweitern, nur einmal im Code vorkommen. Andernfalls kann Sass unordentliches, verwundenes CSS generieren.

Optional erweitert

Manchmal möchten Sie, dass ein @extend optional ist und nicht verlangt, dass die angegebene Klasse in Ihrem Code vorhanden ist.

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

Dies führt zu folgendem CSS:

.message-important {
  background: red;
}

Haftungsausschluss: Dies ist während der Entwicklung hilfreich, wenn Sie möglicherweise noch nicht den gesamten Code geschrieben haben und keine Fehler möchten. Er sollte jedoch in der Produktion entfernt werden, da dies zu unerwarteten Ergebnissen führen kann.

Platzhalter

Manchmal erstellen Sie Klassen, die nicht eigenständig verwendet werden, sondern nur innerhalb anderer Regelsätze erweitert werden. Dies bedeutet, dass die kompilierte CSS-Datei größer ist, als es sein muss. Platzhalter-Selektoren lösen dieses Problem.

Platzhalter-Selektoren ähneln Klassen-Selektoren, verwenden jedoch das Prozentzeichen (%) anstelle des (.) Für Klassen verwendeten. Sie werden nicht im kompilierten CSS angezeigt.

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

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

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

Dies wird in das folgende CSS übersetzt:

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

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

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

Eltern erweitern

Normalerweise versuchen Sie, das übergeordnete Element wie folgt zu erweitern:

.parent {
  style: value;

  @extend &;
}

Wird zu einem Fehler führen, der besagt, dass das übergeordnete Element nicht erweitert werden kann. Das macht Sinn, aber es gibt eine Problemumgehung. Speichern Sie einfach den übergeordneten Selektor in einer Variablen.

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

Im obigen Beispiel ist dies nicht von Vorteil, jedoch können Sie übergeordnete Stile innerhalb eines enthaltenen Mixins umschließen.