Nesting i SASS

Denne artikkelen forklarer nesting i SASS.

Vi forklarer SASS-nesting steg for steg, inkludert eksempelkode for å utdype forståelsen din.

YouTube Video

Nesting i SASS

SASS er et utvidet stilarkspråk for CSS som tilbyr mange funksjoner for effektiv styling. Blant disse er nesting en spesielt nyttig funksjon for å visuelt representere den hierarkiske strukturen i CSS.

Grunnleggende om Nesting

I SASS kan du organisere koden din visuelt ved å skrive CSS-selektorer i en hierarkisk struktur. For eksempel, la oss se hvordan du kan omskrive følgende CSS-kode ved bruk av nesting.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Med SASS kan du skrive denne koden kortfattet med nesting, som vist nedenfor.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}
  • Denne koden bruker nestingfunksjonen i SASS til å beskrive navigasjonsmenystilene kortfattet og hierarkisk. Ved å bruke nesting blir foreldre-barn-forholdene visuelt tydelige, og lesbarheten øker.

Referere til overordnede selektorer (&)

Når du trenger å referere til den overordnede selektoren innenfor nestede stiler, bruk &. Dette lar deg lage selektorer med spesifikke tilstander eller modifikatorer.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}
  • Denne koden bruker & i SCSS for å definere :hover og :active tilstandene for den overordnede .button-selektoren.

Generert CSS

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Nesting av mediespørringer

I SASS kan du også neste mediespørringer. Dette lar deg implementere responsiv design samtidig som stilene dine forblir relevante.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}
  • Denne koden neste en mediespørring innenfor .container-klassen og muliggjør et responsivt design som endrer bredde etter skjermstørrelse.

Generert CSS

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Viktige punkter om nesting

For mye nesting kan gjøre koden din dypt lagdelt og redusere vedlikeholdbarheten. Du bør unngå dyp nesting som i eksempelet under.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Denne typen kode er for dypt nestet, så den kan omstruktureres på følgende måte.

1.header .nav ul li a {
2    color: red;
3}

Praktisk eksempel: Navigasjonslinje

Nedenfor er et eksempel på styling av navigasjonslinje ved bruk av SASS-nesting.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}
  • Denne koden organiserer og definerer stilene for lister og lenker i navigasjonslinjen, inkludert hover-effekter, ved bruk av SASS-nesting.

Generert CSS

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Sammendrag

Nestingfunksjonen i SASS er et kraftig verktøy for å beskrive CSS sin hierarkiske struktur kortfattet og forbedre lesbarheten. Det er imidlertid viktig å unngå overdreven nesting og å organisere koden riktig.

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