Articles
Introduktion til SASS/SCSS
Kombinatorer i indlejring

Kombinatorer i indlejring

Denne artikel forklarer om kombinatorer i indlejring.

Vi forklarer, hvordan man bruger kombinatorer i indlejring med SASS og giver eksempler, der hjælper dig med at forstå det trin for trin.

YouTube Video

Kombinatorer i indlejring

I SASS kan du skrive CSS-selektorer kortfattet baseret på forældre-barn forhold, men der kræves særlig opmærksomhed for korrekt at håndtere kombinatorer såsom efterkommer- og tilstødende selektorer.

Grundlæggende om indlejring

I SASS kan du ved at indlejre børne-selektorer i forældre-selektorer tydeligt og kortfattet repræsentere forældre-barn-forhold i CSS.

Eksempel: Grundlæggende indlejring 

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

Kompileret CSS 

1.nav ul li {
2    color: blue;
3}

Reference til forældre-selektor (&)

SASS’s & bruges til at referere til den aktuelle forældre-selektor.

Kombinering af kombinatorer og &

Ved at bruge & kan du opbygge fleksible selektorer.

Eksempel 
1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}
Kompileret CSS 
1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Forkortet notation for &

I SASS, når en kombinator placeres i begyndelsen af en selektor, indsættes forældre-selektoren implicit, så du kan udelade &.

Tilfælde hvor udeladelse er mulig

For eksempel, når du skriver + .item, tolker SASS det internt som & + .item og genererer automatisk kombinationen med forældre-selektoren.

Eksempel 
1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}
Kompileret CSS 
1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Oversigt over kombinatorer

CSS-kombinatorer definerer forholdet mellem selektorer. Følgende er de vigtigste typer af kombinatorer.

  1. Efterkommer-selektor (mellemrum) En efterkommer-selektor retter sig mod alle efterkommerelementer indeholdt i et forældreelement. Eksempel: .parent .child

  2. Børne-selektor (> ) En børne-selektor retter sig kun mod de umiddelbare børneelementer. Eksempel: .parent > .child

  3. Tilstødende selektor (+) En tilstødende selektor retter sig mod det umiddelbart følgende søskendeelement. Eksempel: .sibling1 + .sibling2

  4. Generel søskendeselektor (~) Den generelle søskendeselektor retter sig mod alle følgende søskendeelementer. Eksempel: .sibling1 ~ .sibling2

Sådan bruges kombinatorer i SASS

Efterkommer-selektor (mellemrum)

I SASS-indlejring anvendes efterkommer-selektoren med mellemrum som standard.

Eksempel 
1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}
Kompileret CSS 
1.container .header .title {
2    font-size: 20px;
3}

Børne-selektor (> )

Hvis du vil bruge en børne-selektor, skal du eksplicit skrive > i din SASS-kode.

Eksempel 
1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}
Kompileret CSS 
1.container > .header > .title {
2    font-size: 20px;
3}

Tilstødende selektor (+)

For at style det umiddelbart følgende søskendeelement, brug +.

Eksempel 
1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}
Kompileret CSS 
1.item + .item {
2    margin-top: 10px;
3}

Generel søskendeselektor (~)

For at style alle følgende søskende på samme niveau, brug ~.

Eksempel 
1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}
Kompileret CSS 
1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Pseudo-klasser og pseudo-elementer med indlejring

Pseudo-klasser og pseudo-elementer kan også nemt skrives i SASS.

Eksempel 
1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}
Kompileret CSS 
1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Praktisk eksempel

Herunder er et eksempel på en kompleks stil, der 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}
Kompileret 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 indlejring og kombinatorer korrekt i SASS, kan du skrive mere kortfattet og læselig CSS.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Indlejring i SASS