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?
seine Syntax sieht aus wie:
<span><span>@extend .class-name;</span></span>
<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>
<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>Kenne der Grundlagen, wir werden uns jetzt einige Anwendungsfälle für @extend ansehen.
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.
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
<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.
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.
Durch die obigen Beispiele können wir über @extend mehrere Vorteile der Vererbung erkennen. Dazu gehören:
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.
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.
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.
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.
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.
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.
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!
Was sind die Vorteile des Java-Factory-Musters?
So öffnen Sie HTML-Dateien
Datenstruktur der C-Sprache
Daten von der mobilen Festplatte wiederherstellen
So beheben Sie das Problem mit einem nicht erkannten USB-Gerät
Was ist die Tastenkombination zum Wechseln des Benutzers?
So lösen Sie das Problem, wenn der Computer eingeschaltet wird, der Bildschirm schwarz wird und der Desktop nicht aufgerufen werden kann
Welche Fehlerkorrektursysteme für Domainnamen gibt es?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
