SASS `@at-root`
Dieser Artikel erklärt @at-root in SASS.
Wir behandeln Schritt für Schritt alles von der grundlegenden Nutzung von @at-root bis hin zu fortgeschrittenen Beispielen.
YouTube Video
Über SASS @at-root
@at-root ist eine von SASS bereitgestellte Direktive, mit der verschachtelte Selektoren oder Eigenschaften aus der aktuellen Schachtelung in den übergeordneten Geltungsbereich verschoben werden. Durch diese Funktion können Sie die Schachtelungstiefe steuern und das gewünschte CSS effizienter erzeugen.
Grundlegende Verwendung von @at-root
Die Schachtelung in SASS macht Code lesbarer, aber zu tiefe Schachtelungen können zu unbeabsichtigtem CSS führen. Mit @at-root können Sie bestimmte Codeblöcke von der Schachtelungsstruktur ausnehmen.
Grundlegende Syntax
1@at-root {
2 // Code to be output at the parent (root) scope
3}Beispielhafte Verwendung
1.nav {
2 color: blue;
3 @at-root {
4 .nav-item {
5 color: red;
6 }
7 }
8}Kompiliertes CSS
1.nav {
2 color: blue;
3}
4.nav-item {
5 color: red;
6}- Durch
@at-rootwird.nav-itemaußerhalb von.navausgegeben.
„@at-root“ in verschachtelten Selektoren
Selbst bei tiefer Schachtelung können Sie mit @at-root bestimmte Selektoren auf die Wurzelebene verschieben. So können Sie auch in komplexen Strukturen kontrolliert CSS ausgeben.
Beispielhafte Verwendung
1.card {
2 background: white;
3 .card-header {
4 color: black;
5 @at-root .card-title {
6 font-size: 20px;
7 }
8 }
9}Kompiliertes CSS
1.card {
2 background: white;
3}
4.card .card-header {
5 color: black;
6}
7.card-title {
8 font-size: 20px;
9}- Mit
@at-rootwird.card-titleaußerhalb von.card-headerausgegeben.
„@at-root“ mit Argumenten
Durch das Angeben von Argumenten lässt sich @at-root flexibler steuern.
Argument „without“
Wenn Sie das Argument without verwenden, ignoriert die Ausgabe die angegebenen Geltungsbereiche. Das heißt, Sie können übergeordnete Regeln oder Medienabfragen entfernen.
Beispielhafte Verwendung
1.nav {
2 @media (min-width: 768px) {
3 &__item {
4 @at-root (without: media) {
5 color: red;
6 }
7 }
8 }
9}Kompiliertes CSS
1.nav__item {
2 color: red;
3}- In diesem Fall schließt
@at-root (without: media)den Geltungsbereich der Medienabfrage aus und.nav__itemwird auf der Wurzelebene ausgegeben.
Argument „with“
Mit with bleiben nur die angegebenen Geltungsbereiche in der Ausgabe erhalten. Nützlich, wenn Sie auf der Wurzelebene ausgeben möchten und dabei bestimmte Geltungsbereiche beibehalten wollen.
Beispielhafte Verwendung
1.nav {
2 &__item {
3 @media (min-width: 768px) {
4 @at-root (with: media) {
5 &-large {
6 font-size: 18px;
7 }
8 }
9 }
10 }
11}Kompiliertes CSS
1@media (min-width: 768px) {
2 .nav__item-large {
3 font-size: 18px;
4 }
5}@at-root (with: media)verschiebt den Selektor in die Wurzelebene, wobei die Struktur der Medienabfrage erhalten bleibt.
Mehrere Bedingungen angeben
Sie können auch mehrere Bereiche gleichzeitig angeben, getrennt durch Leerzeichen.
Beispielhafte Verwendung
1.wrapper {
2 @media (min-width: 600px) {
3 @at-root (without: rule media) {
4 .global-style {
5 color: green;
6 }
7 }
8 }
9}Kompiliertes CSS
1.global-style {
2 color: green;
3}- In diesem Beispiel werden sowohl
rule(normale Selektoren) als auchmedia(Medienabfragen) ausgeschlossen, sodass.global-stylezu keinem Geltungsbereich gehört und vollständig auf der Wurzelebene ausgegeben wird. Das ist nützlich, wenn Sie auch in komplexer Schachtelung bewusst globale Styles definieren möchten.
Kombination mit Medienabfragen
Mit @at-root können Sie aus Medienabfragen heraus Stile auf Root-Ebene ausgeben. Damit können Sie Responsive Design auf Komponentenebene definieren.
Beispielhafte Verwendung
1.container {
2 @media (min-width: 768px) {
3 @at-root {
4 .container-large {
5 width: 80%;
6 }
7 }
8 }
9}Kompiliertes CSS
1.container-large {
2 width: 80%;
3}- Mit
@at-rootkönnen Sie auch innerhalb von Medienabfragen Styles auf Wurzelebene ausgeben. So lassen sich für jeden Breakpoint eigenständige globale Styles definieren.
Anwendungsfälle für @at-root
@at-root ist praktisch, wenn Sie unter bestimmten Bedingungen Styles auf Wurzelebene ausgeben möchten. Besonders hilfreich beim Umgang mit Medienabfragen oder themenspezifischen Styles innerhalb von Komponenten.
Komponenten und Themes trennen
Mit @at-root können Sie auch aus Medienabfragen heraus eigenständige globale Klassen erzeugen. So lassen sich Themes und Zustände pro Komponente leichter organisieren.
Beispielhafte Verwendung
1.card {
2 background: white;
3 color: black;
4
5 @media (prefers-color-scheme: dark) {
6 @at-root (with: media) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11 }
12 }
13}Kompiliertes CSS
1.card {
2 background: white;
3 color: black;
4}
5
6@media (prefers-color-scheme: dark) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11}- In diesem Beispiel wird, während innerhalb von
.cardStyles für das Dark-Theme definiert werden, mit@at-rooteine separate Klasse.card-darkerzeugt. Dadurch können Sie Klassen über verschiedene Themes hinweg flexibel umschalten.
Notizen
Beim Einsatz von @at-root sollten Sie Folgendes beachten.
-
Übermäßige Nutzung vermeiden
@at-rootist mächtig, aber ein übermäßiger Einsatz kann die Intention Ihrer Schachtelung verschleiern. -
Intention klar machen Kommentare dazu, warum Sie
@at-rootverwenden, erleichtern anderen Entwicklern das Verständnis. -
Auf Konsistenz der Geltungsbereiche achten Das Verschieben der Ausgabe in die Wurzelebene kann Stilabhängigkeiten verändern. Machen Sie deutlich, auf welche Elemente es sich bezieht.
-
Mit anderen SASS-Funktionen kombinieren Die Kombination von
@at-rootmit@mixinund@functionermöglicht ein flexibleres CSS-Design.
Zusammenfassung
{^ i18n_speak
@at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.