Kombinatoren in Verschachtelungen
Dieser Artikel erklärt Kombinatoren in Verschachtelungen.
Wir erklären, wie man Kombinatoren in Verschachtelungen mit SASS verwendet, und stellen Beispielcode zur Verfügung, um Ihnen schrittweise zu helfen.
YouTube Video
Kombinatoren in Verschachtelungen
In SASS kann man CSS-Selektoren dank Eltern-Kind-Beziehungen übersichtlich schreiben, aber besondere Aufmerksamkeit ist erforderlich, um Kombinatoren wie Nachfahren- und benachbarte Selektoren korrekt zu verwenden.
Grundlagen der Verschachtelung
In SASS kann man durch das Verschachteln von Kind-Selektoren in Eltern-Selektoren Eltern-Kind-Beziehungen in CSS klar und prägnant darstellen.
Beispiel: Grundlegende Verschachtelung
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}Kompiliertes CSS
1.nav ul li {
2 color: blue;
3}Elternselektor-Referenz (&)
Das & von SASS wird verwendet, um auf den aktuellen Elternselektor zu verweisen.
Kombination von Kombinatoren und &
Durch die Verwendung von & können Sie flexible Selektoren erstellen.
Beispiel
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}Kompiliertes CSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}Abgekürzte Schreibweise für &
In SASS wird, wenn ein Kombinator am Anfang eines Selektors steht, der übergeordnete Selektor implizit eingefügt, sodass Sie das & weglassen können.
Fälle, in denen das Weglassen möglich ist
Wenn Sie zum Beispiel + .item schreiben, interpretiert SASS dies intern als & + .item und erstellt automatisch die Kombination mit dem übergeordneten Selektor.
Beispiel
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}Kompiliertes CSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}Überblick über Kombinatoren
CSS-Kombinatoren definieren die Beziehung zwischen Selektoren. Im Folgenden sind die wichtigsten Kombinator-Typen aufgeführt.
-
Nachfahrenselektor (Leerzeichen) Ein Nachfahrenselektor wählt alle Nachfahren eines Elternelements aus. Beispiel:
.parent .child -
Kind-Selektor (
>) Ein Kind-Selektor wählt nur direkte Kindelemente aus. Beispiel:.parent > .child -
Angrenzender Selektor (
+) Ein benachbarter Selektor wählt das unmittelbar folgende Nachbar-Geschwisterelement aus. Beispiel:.sibling1 + .sibling2 -
Allgemeiner Geschwister-Selektor (
~) Der allgemeine Geschwister-Selektor wählt alle nachfolgenden Geschwisterelemente aus. Beispiel:.sibling1 ~ .sibling2
Wie man Kombinatoren in SASS verwendet
Nachfahrenselektor (Leerzeichen)
In der SASS-Verschachtelung wird der Nachfahrenselektor (Leerzeichen) standardmäßig angewendet.
Beispiel
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}Kompiliertes CSS
1.container .header .title {
2 font-size: 20px;
3}Kind-Selektor (> )
Wenn Sie einen Kind-Selektor verwenden möchten, schreiben Sie > explizit in Ihren SASS-Code.
Beispiel
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}Kompiliertes CSS
1.container > .header > .title {
2 font-size: 20px;
3}Angrenzender Selektor (+)
Um das unmittelbar folgende Geschwisterelement zu gestalten, verwenden Sie +.
Beispiel
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}Kompiliertes CSS
1.item + .item {
2 margin-top: 10px;
3}Allgemeiner Geschwister-Selektor (~)
Um alle nachfolgenden Geschwister auf derselben Ebene zu gestalten, verwenden Sie ~.
Beispiel
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}Kompiliertes CSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}Pseudo-Klassen und Pseudo-Elemente mit Verschachtelung
Pseudo-Klassen und Pseudo-Elemente können in SASS ebenfalls einfach geschrieben werden.
Beispiel
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}Kompiliertes CSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}Praktisches Beispiel
Unten finden Sie ein Beispiel für einen komplexen Stil, der mehrere Kombinatoren kombiniert.
SASS-Code
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}Kompiliertes CSS
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}Zusammenfassung
Wenn Sie Verschachtelungen und Kombinatoren in SASS richtig verstehen, können Sie CSS prägnanter und lesbarer schreiben.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.