Sass @extend und Vererbung

Die @extend-Direktive teilt Sass mit, dass die Stile eines Selektors von einem anderen Selektor geerbt werden.

Wenn ein Stil fast identisch mit einem anderen ist und nur wenige Unterschiede aufweist, dann wird die Verwendung von @extend sehr nützlich.

Im folgenden Sass-Beispiel erstellen wir einen grundlegenden Button-Stil .button-basic, dann definieren wir zwei Button-Stile .button-report und .button-submit, die beide von .button-basic erben. Der Hauptunterschied liegt in der Hintergrundfarbe und der Schriftfarbe; die anderen Stile sind gleich.

Sass-Code:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Konvertieren Sie den obigen Code in CSS-Code, wie unten gezeigt:

CSS-Code:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

Nach der Verwendung von @extend müssen wir im HTML-Button-Tag nicht mehrere Klassen wie class="button-basic button-report" angeben; wir müssen nur die Klasse class="button-report" festlegen.

@extend ist eine gute Demonstration der Code-Wiederverwendung.

Andere Erweiterungen