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.