Kombinatorer i nestede strukturer
Denne artikkelen forklarer kombinatorer i nestede strukturer.
Vi forklarer hvordan du bruker kombinatorer i nestede strukturer med SASS og gir eksempelkode for å hjelpe deg å forstå steg for steg.
YouTube Video
Kombinatorer i nestede strukturer
I SASS kan du skrive CSS-selektorer kortfattet basert på foreldre-barn-forhold, men det krever spesiell oppmerksomhet for å håndtere kombinatorer som etterkommer- og naboselektorer korrekt.
Grunnleggende om nesting
I SASS kan du tydelig og enkelt representere foreldre-barn-forhold i CSS ved å neste barne-selektorer inne i foreldre-selektorer.
Eksempel: Grunnleggende nesting
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}
Kompilert CSS
1.nav ul li {
2 color: blue;
3}
Referanse til foreldreselektor (&
)
&
i SASS brukes til å referere til den nåværende foreldreselektoren.
Kombinere kombinatorer og &
Ved å bruke &
kan du lage fleksible selektorer.
Eksempel
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}
Kompilert CSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}
Forkortet notasjon for &
I SASS, når en kombinator plasseres i begynnelsen av en selektor, settes foreldreselektoren inn automatisk, så du kan utelate &
.
Tilfeller hvor utelatelse er mulig
For eksempel, når du skriver + .item
, tolker SASS det internt som & + .item
og lager automatisk kombinasjonen med foreldreselektoren.
Eksempel
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}
Kompilert CSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}
Oversikt over kombinatorer
CSS-kombinatorer definerer forholdet mellom selektorer. Følgende er hovedtypene av kombinatorer.
-
Etterkommer-selektor (mellomrom) En etterkommer-selektor retter seg mot alle elementer som ligger inne i et overordnet element. Eksempel:
.parent .child
-
Barne-selektor (
>
) En barne-selektor retter seg kun mot de umiddelbare barneelementene. Eksempel:.parent > .child
-
Naboselektor (
+
) En naboselektor retter seg mot det umiddelbart påfølgende naboelementet. Eksempel:.sibling1 + .sibling2
-
Generell søsken-selektor (
~
) Den generelle søsken-selektoren retter seg mot alle påfølgende søskenelementer. Eksempel:.sibling1 ~ .sibling2
Hvordan bruke kombinatorer i SASS
Etterkommer-selektor (mellomrom)
I SASS-nestede strukturer brukes mellomroms-etterkommer-selektoren som standard.
Eksempel
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}
Kompilert CSS
1.container .header .title {
2 font-size: 20px;
3}
Barne-selektor (>
)
Hvis du vil bruke en barne-selektor, må du skrive >
eksplisitt i SASS-koden.
Eksempel
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}
Kompilert CSS
1.container > .header > .title {
2 font-size: 20px;
3}
Naboselektor (+
)
For å style det umiddelbart påfølgende søskenelementet, bruk +
.
Eksempel
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}
Kompilert CSS
1.item + .item {
2 margin-top: 10px;
3}
Generell søsken-selektor (~
)
For å style alle påfølgende søsken på samme nivå, bruk ~
.
Eksempel
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}
Kompilert CSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}
Pseudo-klasser og pseudo-elementer med nesting
Pseudo-klasser og pseudo-elementer kan også enkelt skrives i SASS.
Eksempel
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}
Kompilert CSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}
Praktisk eksempel
Nedenfor er et eksempel på en kompleks stil som kombinerer flere kombinatorer.
SASS-kode
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}
Kompilert 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}
Sammendrag
Hvis du forstår nesting og kombinatorer korrekt i SASS, kan du skrive mer kortfattet og lesbar CSS.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.