Die Vorteile der Vererbung über @extend in sass

Key Takeaways

Die @extend -Funktion von 🎜> Sass ermöglicht es Klassen, Eigenschaften miteinander zu teilen, die Organisation von CSS -Stylesheets zu vereinfachen und die effektiv leichteren Websites zu erleichtern.
Die @extend -Funktion kann die Duplikation in CSS -Stylesheets verringern und HTML -Klassen sauberer machen, Entwicklern Zeit und Anstrengung sparen und die CSS -Struktur organisierter und leichter aufrechterhalten.
Bei der Verwendung @Extend wird jedoch Vorsicht empfohlen, da sie die Größe und die Auswirkung der CSS -Leistung drastisch erhöhen kann, wenn sie nachlässig verwendet werden. Es sollte nur verwendet werden, wenn sich die ererbte Klasse direkt auf das Objekt bezieht, das von.
• vererbt wird.
SASS ist eine wertvolle Erweiterung für CSS, die es sauberer, gut strukturiert und leichter zu entwickeln und zu warten. Es wird für diejenigen empfohlen, die es vorher noch nicht ausprobiert haben, aber es sollte sorgfältig verwendet werden, um mögliche Fallstricke zu vermeiden.

Die Organisation von CSS -Stylesheets ist entscheidend für die effektive Styling von großen Websites, aber Stylesheets in unseren Projekten wurden bei der Entwicklung größerer, komplexer und schwierigerer Aufrechterhaltung. Hier kommt Sass ins Spiel, um alles einfacher zu machen.

Für diejenigen, die Sass noch nicht erkunden müssen, ist es eine Erweiterung von CSS. Es bietet uns Funktionen für uns, die in nativen CSS wie Ausdrücken, Variablen, Verschachteln, Mixins (Sass -Name für Funktionen), Vererbung und mehr nicht existieren.

In diesem Artikel werde ich einen Überblick über die Erbschaft in SASS mit @extend geben. Ich werde die Vorteile, die diese Funktion mit sich bringt, und meine Erfahrungen, wenn ich sie in meinen eigenen Projekten einsetzt. Es ist wichtig zu beachten, dass @extend missbraucht werden kann, Hugo Giraudel hier auf SitePoint schrieb sogar ein Stück darüber, warum Sie Sass @extend vermeiden sollten. Beachten Sie also, dass @extend ein umstrittenes Thema sein kann.

Beobachten Sie Atoz: Sass Lernen Sie Sass Letter nach Brief

Sehen Sie sich diesen Kurs an Sehen Sie sich diesen Kurs an In den folgenden Beispielen werde ich die SCSS -Syntax verwenden. Dies ist die Syntax, die alle Merkmale und Struktur von CSS mit den zusätzlichen Funktionen von Sass enthält.

Was ist @extend?

@extend ist eine Funktion von SASS, mit der Klassen eine Reihe von Eigenschaften miteinander teilen können. Selektoren, dass @extend eine Klasse in SASS ihren Selektor direkt neben der Klasse enthalten wird, erweitert sie, was zu einer von Kommas getrennten Liste führt.

seine Syntax sieht aus wie:

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

Verwendung

@extend sieht so aus wie:

<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>

Dies wird zusammengestellt zu:

<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>

Im obigen Beispiel habe ich .foo und .bar definiert, die die folgenden Funktionen haben:

• .Bar erbt aus .foo und enthält alle Eigenschaften der übergeordneten Klasse .foo.
• .bar erstreckt sich .foo durch Hinzufügen der Eigenschaft Hintergrundfarbe.

Kenne der Grundlagen, wir werden uns jetzt einige Anwendungsfälle für @extend ansehen.

@extend

Anwendung Fall 1: Duplikation

Duplikation von Eigenschaften zwischen Klassen ist beim Zusammenstellen von CSS schwer zu vermeiden. Dies kann Ihre Stylesheets komplizierter machen. Zum Beispiel:

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

Wie wir im obigen Beispiel sehen können, enthalten .breakfast, .lunch und .dinner die Eigenschaften Farbe, Rand, Box-Shadow, Rand und Polsterung mit den gleichen Werten. Diese Eigenschaften werden dupliziert und lassen unseren Code chaotisch aussehen. Schreiben wir ihn also mit @extend:

um.

<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 dem umgeschriebenen CSS oben können wir sehen, dass die Verwendung von SASS unsere Markup hilft, sauberer zu werden als CSS allein.

Siehe die Stift -Duplikation von Eigenschaften in SCSS von SitePoint (@sinepoint) auf CodePen.

Fall 2: Mehrere Klassen aus HTML

verschieben

Es gibt häufig Fälle beim Entwerfen einer Seite, wenn eine Klasse alle Stile einer anderen Klasse haben sollte. Wir verarbeiten diesen Fall häufig, indem wir mehrere Klassennamen in der HTML verwenden.

Unser CSS würde so aussehen:

<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>

Unser HTML für dieses CSS:

<span><span>.breakfast</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>.lunch</span> {
</span>  <span>background-color: yellow;
</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>.dinner</span> {
</span>  <span>background-color: orange;
</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>

Im obigen Beispiel haben wir zwei Klassen in unserem

. Stellen Sie sich vor, wie chaotisch dies wäre, wenn wir mehrere Klassen hätten:

<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>

Mit unserem HTML sehen jetzt so aus:

<span><span><span><div> class<span>="candy strawberry-candy"</span>>
  This is the strawberry candy!
<span><span><span></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> class<span>="candy strawberry-candy sugar-free-candy free-candy"</span>>
  This is just an example
<span><span><span></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> class<span>="strawberry-candy"</span>>
  This is the very sweet candy!
<span><span><span></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. 🎜>

In Sass können Sie @Extend innerhalb einer Medienabfrage nicht verwenden, um eine Klasse zu erweitern, die außerhalb der Medienabfrage definiert ist. Dies liegt daran, dass @extend funktioniert, indem Selektoren mit denselben Stilen zusammen gruppieren, und dies kann dies nicht in verschiedenen Medienabfrageblöcken tun. Um dies zu umgehen, können Sie die Klasse definieren, die Sie in demselben Medienabfrageblock ausdehnen möchten.

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.

Das obige ist der detaillierte Inhalt vonDie Vorteile der Vererbung über @extend in sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!