Kombinatorer i nestede strukturer

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.

  1. Etterkommer-selektor (mellomrom) En etterkommer-selektor retter seg mot alle elementer som ligger inne i et overordnet element. Eksempel: .parent .child

  2. Barne-selektor (> ) En barne-selektor retter seg kun mot de umiddelbare barneelementene. Eksempel: .parent > .child

  3. Naboselektor (+) En naboselektor retter seg mot det umiddelbart påfølgende naboelementet. Eksempel: .sibling1 + .sibling2

  4. 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.

YouTube Video