Die Unterschiede zwischen nativem CSS und Sass Nesting

Seit seiner Einführung weigert sich CSS hartnäckig, eine Syntax zum Verschachteln von Selektoren zu unterstützen. Die Alternative bestand immer darin, einen CSS-Präprozessor wie Sass zu verwenden. Aber heute ist die Verschachtelung offiziell Teil des nativen CSS. Sie können diese Funktion direkt in modernen Browsern ausprobieren.

Wenn Sie von Sass migrieren, müssen Sie alle Unterschiede zwischen nativer Verschachtelung und Sass-Verschachtelung berücksichtigen. Es gibt einige wesentliche Unterschiede zwischen beiden Verschachtelungsfunktionen, und es ist wichtig, sich dieser Unterschiede bewusst zu sein, wenn Sie den Wechsel vornehmen.

Sie müssen „&“ mit Elementselektoren in nativem CSS verwenden

CSS Nesting ist noch ein Spezifikationsentwurf mit unterschiedlicher Browserunterstützung. Überprüfen Sie unbedingt Websites wie caniuse.com für aktuelle Informationen.

Hier ist ein Beispiel für die Art der Verschachtelung, die Sie in Sass unter Verwendung der SCSS-Syntax sehen würden:

.nav {
ul { display: flex; }
a { color: black; }
}

Dieser CSS-Block gibt an, dass jede ungeordnete Liste innerhalb eines Elements mit a Navigation Die Klasse wird als flexible Spalte ausgerichtet, eine Möglichkeit Anordnen von HTML-Elementen auf der Seite. Darüber hinaus sind alle Ankerlinktexte innerhalb von Elementen mit einem versehen Navigation Die Klasse sollte schwarz sein.

Nun wäre diese Art der Verschachtelung in nativem CSS ungültig. Damit es funktioniert, müssen Sie das kaufmännische Und-Symbol (&) vor den verschachtelten Elementen einfügen, etwa so:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

Die frühe Version der CSS-Verschachtelung erlaubte keine Verschachtelung von Typselektoren. Eine kürzliche Änderung bedeutet, dass Sie „&“ nicht mehr verwenden müssen, ältere Versionen von Chrome und Safari unterstützen diese aktualisierte Syntax jedoch möglicherweise noch nicht.

Wenn Sie nun einen Selektor verwenden, der mit einem Symbol beginnt (z. B. Klassenselektor), um Zielen Sie auf einen bestimmten Teil der Seite, können Sie das kaufmännische Und weglassen. Die folgende Syntax würde also sowohl in nativem CSS als auch in Sass funktionieren:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Sie können mit „&“ in nativem CSS keinen neuen Selektor erstellen

Eine der Funktionen, die Sie wahrscheinlich an Sass lieben, ist die Möglichkeit, so etwas zu tun:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Dieser Sass-Code wird mit dem folgenden Roh-CSS kompiliert:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

In nativem CSS können Sie mit „&“ keinen neuen Selektor erstellen. Der Sass-Compiler ersetzt das „&“ durch das übergeordnete Element (z. B. .nav), aber natives CSS behandelt das „&“ und den Teil danach als zwei separate Selektoren. Infolgedessen wird versucht, einen zusammengesetzten Selektor zu erstellen, der nicht zum gleichen Ergebnis führt.

Dieses Beispiel funktioniert jedoch in nativem CSS:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Dies funktioniert, weil der erste Selektor derselbe ist wie nav.nav-list in einfachem CSS, und das zweite ist dasselbe wie nav.nav-link. Das Einfügen eines Leerzeichens zwischen dem „&“ und dem Selektor wäre gleichbedeutend mit dem Schreiben nav .nav-list.

Wenn Sie in nativem CSS das kaufmännische Und-Zeichen wie folgt verwenden:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

Es ist das Gleiche, als würde man Folgendes schreiben:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Dies könnte Sie überraschen, wenn man bedenkt, dass beide __nav-Liste Und __nav-link sind im Inneren .nav Wähler. Aber das kaufmännische Und platziert die verschachtelten Elemente tatsächlich vor dem übergeordneten Element.

Die Spezifität kann unterschiedlich sein

Zu beachten ist auch der Einfluss auf die Spezifität, der in Sass nicht auftritt, wohl aber bei der nativen CSS-Verschachtelung.

Nehmen wir also an, Sie haben eine und ein Element. Mit dem folgenden CSS, an In jedem dieser Elemente wird eine Serifenschrift verwendet:

#main, article {
h2 {
font-family: serif;
 }
}

Die kompilierte Version des obigen Sass-Codes lautet wie folgt:

#mainh2,
articleh2 {
font-family: serif;
}

Aber die gleiche Verschachtelungssyntax in nativem CSS führt zu einem anderen Ergebnis, im Grunde dasselbe wie:

:is(#main, article) h2 {
font-family: serif;
}

Der Ist() Der Selektor behandelt Spezifitätsregeln etwas anders als die Sass-Verschachtelung. Im Wesentlichen ist die Spezifität von:Ist() wird automatisch auf das spezifischste Element in der Liste der bereitgestellten Argumente aktualisiert.

Die Reihenfolge der Elemente kann das ausgewählte Element ändern

Die Verschachtelung in nativem CSS kann die tatsächliche Bedeutung des Selektors völlig ändern (d. h. ein völlig anderes Element auswählen).

Betrachten Sie zum Beispiel den folgenden HTML-Code:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

Und das folgende CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Dies ist das Ergebnis, wenn Sie Sass als CSS-Compiler verwenden:

Nun im HTML-Block, wenn Sie das verschieben würden mit der Klasse von Dunkles Thema innerhalb von Aufruf zum Handeln, würde es den Selektor beschädigen (im Sass-Modus). Wenn Sie jedoch auf normales CSS (also ohne CSS-Präprozessor) umsteigen, funktionieren die Stile weiterhin.

Dies liegt an der Art und Weise, wie die :Ist() funktioniert unter der Haube. Das oben verschachtelte CSS lässt sich also in das folgende einfache CSS kompilieren:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Dies ist die Angabe von a .Überschrift das ist ein Nachkomme von beidem .Dunkles Thema Und .Aufruf zum Handeln. Aber die Reihenfolge spielt keine Rolle. Solange die .Überschrift ist der Nachkomme von .Aufruf zum Handeln Und .Dunkles Thema, es funktioniert in beiden Reihenfolgen.

Dies ist ein Randfall und etwas, dem Sie nicht so oft begegnen werden. Aber das Verständnis der :Ist() Die zugrunde liegende Funktionalität des Selektors kann Ihnen dabei helfen, die Funktionsweise der Verschachtelung in CSS zu beherrschen. Das macht auch Debuggen Ihres CSS viel einfacher.

Erfahren Sie, wie Sie Sass in React verwenden

Da Sass nach CSS kompiliert wird, können Sie es mit praktisch jedem UI-Framework verwenden. Sie können den CSS-Präprozessor in Vue-, Preact-, Svelte- und natürlich React-Projekten installieren. Der Einrichtungsprozess für Sass für alle diese Frameworks ist ebenfalls recht unkompliziert.

Der größte Vorteil der Verwendung von Sass in React besteht darin, dass Sie saubere, wiederverwendbare Stile mithilfe von Variablen und Mixins schreiben können. Wenn Sie als React-Entwickler wissen, wie man Sass verwendet, können Sie saubereren und effizienteren Code schreiben und insgesamt ein besserer Entwickler werden.