<span><span>.meal-box</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.breakfast</span> {
</span>  <span><span>@extend .meal-box;</span>
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: yellow;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: orange;
</span><span>}</span>

Der obige HTML -Code k?nnte ziemlich komplex werden. Einige Webentwickler bevorzugen es so, ich bevorzuge jedoch die Vererbung in meinen Sass -Stilen:

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

<span><span><span><div</span> class<span>="candy strawberry-candy"</span>></span>
</span>  This is the strawberry candy!
<span><span><span></div</span>></span></span>

Diesmal brauchen wir nur eine Klasse. Alle für die Klasse definierten Stile .Candy werden ebenfalls auf die Klasse angewendet .strawberry-candy, jetzt wird unser HTML-Code sauberer.

Siehe den Stift, der mehrere Klassen aus HTML mit @extend von sitepoint (@sinepoint) auf CodePen bewegt.

Fall 3: Erweiterung komplexer Selektoren

Klassenauswahlern sind nicht die einzigen Dinge, die erweitert werden k?nnen. Wir k?nnen auch komplexe Selektoren in ein einzelnes Element ausdehnen, wie z. B. A: Hover, .ParentClass.ChildClass usw. Zum Beispiel:

<span><span><span><div</span> class<span>="candy strawberry-candy sugar-free-candy free-candy"</span>></span>
</span>  This is just an example
<span><span><span></div</span>></span></span>

Dies wird zusammengestellt zu:

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span><span>@extend .candy;</span>
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

, den wir dann in unserer HTML wie folgt verwenden k?nnen:

<span><span><span><div</span> class<span>="strawberry-candy"</span>></span>
</span>  This is the very sweet candy!
<span><span><span></div</span>></span></span>

Siehe den Stift, der komplexe Selektoren mit @extend von sitepoint (@sinepoint) auf CodePen erweitert.

Vorteile von @extend

Durch die obigen Beispiele k?nnen wir über @extend mehrere Vorteile der Vererbung erkennen. Dazu geh?ren:

Cleaner HTML -Klassen

Wie Sie in der zweiten Fallstudie sehen k?nnen, kann es schwierig sind, so viele Klassen in einem Element zu verwenden, um die Grundursache zu bestimmen, wenn Sie auf Probleme sto?en. Die Struktur von HTML -Tags sieht auch nicht sehr gut und sauber aus.

Aus meiner Sicht, wenn wir ein gutes Produkt herstellen, betrachten wir nicht nur die Perspektive des Endbenutzers, sondern auch die Qualit?t unserer Entwicklungsstrategie. Daher hilft @extend uns dabei, unsere Klassen in jedem HTML -Element sauberer zu strukturieren.

Verringerung der Duplikation von CSS

In der Webentwicklung haben wir immer eine gewisse Doppelarbeit in unseren CSS -Stilen. Daher kann die Wiederverwendung des schriftlichen CSS -Quellcodes ?u?erst erforderlich sein. @extend kann uns helfen, unser CSS wiederzuverwenden, wenn es angemessen und sauberer ist.

Zeit und Anstrengung sparen

Mit den beiden oben genannten Vorteilen k?nnen Entwickler w?hrend der Entwicklung Zeit und Mühe sparen.

Entwickler k?nnen CSS für verschiedene Elemente wiederverwenden und die Anstrengungen reduzieren, die erforderlich sind, um die Ursache für CSS -Probleme zu finden und ihre CSS -Struktur sch?n und sauber zu machen.

Die Verwendung @Extend ist jedoch nicht ohne Gefahren. Die oben genannten Vorteile gelten nur, wenn @extend sorgf?ltig verwendet wird - sie kann überbeansprucht werden, was den gegenteiligen Effekt verursacht.

Die Gefahren von @extend

Ich habe @extend in meinen eigenen Projekten angewendet und muss bei der Verwendung @extend ein Wort der Vorsicht machen. Sie müssen vorsichtig sein.

@extend kann Ihre CSS -Dateigr??e drastisch erh?hen und die Leistung Ihres CSS ohne Sorgfalt beeinflussen. Ich hatte meinen Anteil an Schmerzen in einer solchen Situation und verbrachte viel Zeit damit, den Gebrauch von @extend durch die Sass zu überarbeiten. Hier ist ein Beispiel dafür, wie ich @Extend f?lschlicherweise verwendet habe:

Beispiel:

<span><span>@extend .class-name;</span></span>

wird zusammengestellt zu:

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

In diesem Beispiel ist Base-CSS eine Klasse mit vielen geerbten Klassen, die darauf basieren. Wenn Sie sich das Beispiel ansehen, k?nnen Sie sehen, dass die ererbten Klassen nicht miteinander verbunden sind. Ich habe .Btn für meine Kn?pfe und. Wenn ich 100 Klassen von .Base-CSS erben, nehmen die Selektoren mit .Base-CSS-Eigenschaften zu. Dies kompliziert unser CSS -Endergebnis erheblich und unn?tig. Darüber hinaus macht es schwieriger, die Eigenschaften jedes Selektors zu überprüfen.

Nachdem ich mein Sass neu gearbeitet habe, wurde mir klar, dass wir nur @Extend verwenden sollten, wenn die ererbte Klasse direkt auf das Objekt bezieht, von dem wir erbten. Es sollte eine Variation des Objekts oder Stils sein und nicht für viele nicht verwandte Elemente. Für die Vererbung wie mein Beispiel sollten wir uns auf die vorhandenen Funktionen von CSS verlassen, um unsere Stile in Kinderelemente zu kaskaden.

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

wird zusammengestellt zu:

<span><span>@extend .class-name;</span></span>

Wir k?nnen sehen, dass das obige Beispiel viel korrekter und vernünftiger ist. Wir haben den Umfang reduziert, indem wir @Extend nur auf Klassen angewendet haben, die aufgrund einer Variation einer Art von Objekt voneinander erben sollten. Beispielsweise beziehen sich die oben genannten Stile mit verschiedenen Arten von Schaltfl?chen.

Schlussfolgerung

Sass ist eine wertvolle Erweiterung, die unser CSS verbessern kann, um es sauberer, gut strukturiert, organisiert und leicht zu entwickeln und zu warten. Wenn Sie SASS noch nicht probiert haben, kann ich es nur empfehlen. Wenn Sie sich mit den Grundlagen von Sass wohler fühlen, empfehlen wir, Hugo Giraudels SitePoint -Artikel darüber zu lesen, was Ihnen niemand über Sasss @extend erz?hlt hat. Wir haben auch einen gesamten SASS -Referenzhandbuch an der SASS -Referenz von SITEPOINT mit vielen Beispielen, die Sie erkunden k?nnen.

Vielen Dank an Steve und Hesekiel in den Kommentaren, um einen Fehler in der ersten Version dieses Beitrags aufzuheben. Seitdem wurde er aktualisiert.

h?ufig gestellte Fragen (FAQs) zur Vererbung durch Erweiterung in SASS

Was ist der Hauptvorteil der Verwendung @extend in SASS? Es erm?glicht eine Klasse, die Stile einer anderen Klasse zu erben, wodurch die Notwendigkeit reduziert wird, sich wiederholende Code zu schreiben. Dies macht den Code nicht nur lesbarer, sondern reduziert auch die Dateigr??e, die die Ladezeit einer Webseite verbessern kann. @extend und @mixin in sass erm?glichen eine Wiederverwendbarkeit von Code, sie funktionieren auf unterschiedliche Weise. @Extend erm?glicht es einem Selektor, die Stile eines anderen Selektors zu erben, w?hrend @Mixin einen Stilblock enth?lt, der im gesamten Stylesheet wiederverwendet werden kann. Der Hauptunterschied besteht @extend mit komplexen Selektoren in SASS? Es ist jedoch wichtig zu beachten, dass @extend nur mit Selektoren funktioniert, die in derselben Datei vorhanden sind. Es funktioniert nicht mit Selektoren, die in einer anderen Datei definiert sind oder solche, die von einem @mixin oder einer Funktion generiert werden. ??>

Kann ich @extend innerhalb einer verschachtelten Regel in SASS verwenden? Es ist jedoch wichtig zu beachten, dass der erweiterte Selektor auf der oberen Ebene des Stylesheets und nicht innerhalb der verschachtelten Regel eingefügt wird. Dies liegt daran ??> Dieser Fehler tritt auf, wenn Sie versuchen, @extend au?erhalb eines in SASS festgelegten Regelsatzes zu verwenden. Um diesen Fehler zu vermeiden, stellen Sie sicher, dass Sie @extend innerhalb eines Regelsatzes verwenden. Anstatt beispielsweise ?@extend .class;“ zu schreiben, sollten Sie ?.New-Class {@extend .class; } ”.

Kann ich @extend mit Pseudoklassen in Sass verwenden? Es ist jedoch wichtig zu beachten, dass @extend nur die Stile der Pseudoklasse erweitert, nicht die Pseudoklasse selbst. Dies bedeutet, dass, wenn Sie ?@extend: schwebe“ verwenden, dem Selektor keinen Schwebeffekt hinzufügen, sondern stattdessen die Stile der: Hover-Pseudo-Klasse erweitert. Nicht in Sass zu arbeiten? Ein h?ufiger Grund ist, dass der Selektor, den Sie zu erweitern versuchen, in derselben Datei nicht vorhanden ist. Ein weiterer Grund k?nnte sein, dass Sie versuchen, einen Selektor innerhalb einer Medienabfrage oder einer verschachtelten Regel zu erweitern, die in SASS nicht zul?ssig ist. überprüfen Sie diese Punkte, wenn Ihr @extend nicht funktioniert.

Kann ich @extend mit mehreren Klassen in SASS verwenden? Sie k?nnen dies tun, indem Sie die Klassen mit einem Komma trennen. Zum Beispiel ?.New-Class {@extend .class1, .class2; } ”Erweitert die Stile von .Class1 und .class2.

Ist es m?glich, die Stile einer erweiterten Klasse in SASS zu überschreiben? Eine erweiterte Klasse in Sass. Sie k?nnen dies tun, indem Sie die neuen Stile nach der @extend -Richtlinie definieren. Die neuen Stile werden die Stile der erweiterten Klasse für den Selektor überschreiben, der @extend verwendet.