Articles
Introduktion till SASS/SCSS
Kombinatorer i nästning

Kombinatorer i nästning

Den här artikeln förklarar kombinatorer i nästning.

Vi kommer att förklara hur man använder kombinatorer i nästning med SASS och ge exempel på kod för att hjälpa dig förstå steg för steg.

YouTube Video

Kombinatorer i nästning

I SASS kan du skriva CSS-selektorer på ett koncist sätt baserat på förälder-barn-relationer, men särskild uppmärksamhet krävs för att korrekt hantera kombinatorer som efterföljande och intilliggande selektorer.

Grunderna i nästning

I SASS kan du tydligt och koncist representera förälder-barn-relationer i CSS genom att nästla underordnade selektorer inuti överordnade selektorer.

Exempel: Enkel nästning 

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

Kompilerad CSS 

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

Referens till föräldraselektor (&)

SASS & används för att referera till den aktuella föräldraselektorn.

Kombinera kombinatorer och &

Genom att använda & kan du bygga flexibla selektorer.

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

Förkortad notation för &

I SASS, när en kombinator placeras i början av en selektor, infogas föräldra-selektorn implicit, så du kan utelämna &.

Fall där utelämning är möjlig

Till exempel, när du skriver + .item, tolkar SASS det internt som & + .item och genererar automatiskt kombinationen med föräldra-selektorn.

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

Översikt av kombinatorer

CSS-kombinatorer definierar relationen mellan selektorer. Följande är de huvudsakliga typerna av kombinatorer.

  1. Efterföljande selektor (mellanrum) En efterföljande selektor riktar sig mot alla underordnade element som finns inuti ett överordnat element. Exempel: .parent .child

  2. Barnselektor (> ) En barnselektor riktar sig endast mot de omedelbara underordnade elementen. Exempel: .parent > .child

  3. Intilliggande selektor (+) En intilliggande selektor riktar sig mot det närmast följande syskonelementet. Exempel: .sibling1 + .sibling2

  4. Allmän syskonselektor (~) Den allmänna syskonselektorn riktar sig mot alla efterföljande syskonelement. Exempel: .sibling1 ~ .sibling2

Hur man använder kombinatorer i SASS

Efterföljande selektor (mellanrum)

I SASS-nästning används efterföljande selektor (mellanrum) som standard.

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

Barnselektor (> )

Om du vill använda en barnselektor, skriv > uttryckligen i din SASS-kod.

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

Intilliggande selektor (+)

För att styla det närmast följande syskonelementet, använd +.

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

Allmän syskonselektor (~)

För att styla alla efterföljande syskon på samma nivå, använd ~.

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

Pseudoklasser och pseudoelement med nästning

Pseudoklasser och pseudoelement kan också enkelt skrivas i SASS.

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

Praktiskt exempel

Nedanför finns ett exempel på en komplex stil som kombinerar flera kombinatorer.

SASS-kod 
 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}
Kompilerad 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}

Sammanfattning

Om du förstår nästning och kombinatorer i SASS korrekt kan du skriva mer koncis och lättläst CSS.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Nästande i SASS