Sass @extend und Vererbung

Sass @extend Anweisung

@extend Anweisungen erlauben es Ihnen, eine Gruppe von CSS-Eigenschaften von einem Selector zu einem anderen Selector zu teilen.

Wenn Sie fast identische Elemente mit nur kleinen Unterschieden in einigen Details haben, dann @extend Anweisungen sehr nützlich.

Der folgende Sass-Beispiel erstellt zunächst einen grundlegenden Stil für die Schaltfläche (dieser Stil wird für die meisten Schaltflächen verwendet). Dann erstellen wir einen Stil für die Schaltfläche "Report" und einen Stil für die Schaltfläche "Submit". Beide Schaltflächen "Report" und "Submit" werden durch @extend Anweisungen erben alle CSS-Eigenschaften der Klasse .button-basic. Außerdem definieren sie ihre eigenen Farben:

SCSS-Syntax:

.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;
}

Nach der Kompilierung wird das CSS wie folgt aussehen:

CSS-Ausgabe：

.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;
}

Durch die Nutzung @extend Anweisung, Sie müssen für das HTML-Element keine mehreren Klassen angeben, z.B.: <button class="button-basic button-report">Diesen Bericht melden</button>. Sie müssen nur .button-report angeben, um zwei Sets von Stilen zu erhalten.

@extend Anweisungen helfen dabei, dein Sass-Code sehr trocken (DRY) zu halten.