@extend und Vererbung in Sass | Erklärt

Das Schreiben eines sauberen und lesbaren CSS -Codes, der redundante Werte nicht wiederholt, ist mit syntaktisch fantastischem Stylesheet (SASS) absolut möglich. Während wir Elemente auf einer Webseite stylen. Das Schreiben eines Stylesheetes für solche Elemente könnte sich als sehr hektisch erweisen, da die Menge der redundanten Werte enorm wäre. Um solche Situationen zu vermeiden, liefert Sass die @extend -Regel. In diesem Beitrag wird diese Regel ausführlich erörtert.

Sass @extend regel und Erbschaft

Wenn Ihre Elemente auf ähnliche Weise nur in geringfügigen Details unterscheiden, möchten Sie ähnliche Eigenschaften eines Elements zu einem anderen erben. Dies ist mit der @extend -Regel möglich, mit der Sie Eigenschaften erben können, die für einen Selektor zum anderen verwendet werden.

Versuchen wir, diese Regel zu verstehen und wie sie mit Hilfe eines Beispiels ähnliche CSS -Eigenschaften erbt.

Beispiel

Im folgenden Beispiel gehen wir davon aus, dass auf unserer Website mehrere Nachrichten wie Fehlermeldung, Warnnachricht, Erfolgsnachricht usw. angezeigt werden. Um diese Elemente zu stylen .Nachrichtenstandard, der alle Eigenschaften enthält, die für alle Arten von Nachrichten, die auf unserer Website angezeigt werden, überflüssig sind.

Sass

.Nachrichtenstandard
Polsterung: 5px;
Grenze: 2px Festgrau;
Text-Align: Mitte;
Farbe weiß;

Dies ist der grundlegende Stil, den alle Nachrichten haben werden, unabhängig von ihrem Typ. Wenn es nun darum geht, diese Nachrichten getrennt zu stylen .Message-Standard-Klasse zusammen mit dem Schreiben anderer Styling-Eigenschaften für jede Art von Nachricht.

Sass

.Message-Error
@erweitern .Nachrichtenstandard;
Hintergrundfarbe: Blau;

.Nachrichtenwarnung
@erweitern .Nachrichtenstandard;
Hintergrundfarbe: Rot;

.Nachrichtensuccess
@erweitern .Nachrichtenstandard;
Hintergrundfarbe: Grün;

Jetzt können Sie feststellen, dass wir im obigen Code -Snippet die @extend -Regel verwendet haben, um die Eigenschaften aus dem zu erben .Message-Standard-Klasse, um jede Art von Nachrichten zu stylen und in der Zwischenzeit eine andere Hintergrundfarbe zu verleihen. Dies kann viel Zeit und Energie sparen, und die Anzahl der Codezeilen verringert sich.

Die resultierende CSS -Ausgabedatei sieht so aus.

.Nachrichtenstandard, .Message-Fehler, .Nachrichtenwarnung, .Nachrichtensuccess
Polsterung: 5px;
Grenze: 2px Festgrau;
Text-Align: Mitte;
Farbe weiß;

.Message-Error
Hintergrundfarbe: Blau;

.Nachrichtenwarnung
Hintergrundfarbe: Rot;

.Nachrichtensuccess
Hintergrundfarbe: Grün;

Wenn Sie sich auf diese Klassen in Ihrem HTML -Code beziehen, müssen Sie sich nicht auf mehrere Klassen beziehen. Verwenden Sie dies beispielsweise nicht

, Verwenden Sie dies einfach

.

Abschluss

Die @extend -Regel in SASS ermöglicht es Ihnen, ähnliche Eigenschaften zu erben, wenn Ihre Elemente auf ähnliche Weise gestaltet werden, die sich nur in geringfügigen Details unterscheiden. Sie können den grundlegenden Stil solcher Elemente in einer Klasse definieren und dann diese Klasse mit der @extend -Regel in anderen Klassen zusammen mit einem zusätzlichen Styling für dieses bestimmte Element erben. Wenn Sie diese Regel verwenden, können Sie viel Zeit sparen und die Codezeilen reduzieren, wodurch Ihr Code sauber wird.