Combinatori nel nesting
Questo articolo spiega i combinatori nel nesting.
Spiegheremo come utilizzare i combinatori nel nesting con SASS e forniremo esempi di codice per aiutarti a comprendere passo dopo passo.
YouTube Video
Combinatori nel nesting
In SASS, puoi scrivere i selettori CSS in modo conciso basandoti su relazioni genitore-figlio, ma è necessaria particolare attenzione per gestire correttamente combinatori come i selettori discendenti e adiacenti.
Basi del nesting
In SASS, nidificando i selettori figli all'interno dei selettori genitori, puoi rappresentare in modo chiaro e conciso le relazioni genitore-figlio nel CSS.
Esempio: nested di base
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}CSS compilato
1.nav ul li {
2 color: blue;
3}Riferimento al selettore genitore (&)
Il & di SASS viene utilizzato per fare riferimento al selettore genitore corrente.
Combinare i combinatori e &
Utilizzando &, è possibile creare selettori flessibili.
Esempio
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}CSS compilato
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}Notazione abbreviata per &
In SASS, quando un combinatore viene posto all'inizio di un selettore, il selettore genitore viene inserito implicitamente, quindi puoi omettere il &.
Casi in cui è possibile l'omissione
Ad esempio, quando scrivi + .item, SASS lo interpreta internamente come & + .item e genera automaticamente la combinazione con il selettore genitore.
Esempio
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}CSS compilato
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}Panoramica dei combinatori
I combinatori CSS definiscono la relazione tra i selettori. I seguenti sono i principali tipi di combinatori.
-
Selettore discendente (spazio) Un selettore discendente prende di mira tutti gli elementi discendenti contenuti all'interno di un elemento genitore. Esempio:
.parent .child -
Selettore figlio (
>) Un selettore figlio prende di mira solo gli elementi figli immediati. Esempio:.parent > .child -
Selettore adiacente (
+) Un selettore adiacente prende di mira l'elemento fratello immediatamente successivo e adiacente. Esempio:.sibling1 + .sibling2 -
Selettore generale dei fratelli (
~) Il selettore generale dei fratelli prende di mira tutti gli elementi fratelli successivi. Esempio:.sibling1 ~ .sibling2
Come usare i combinatori in SASS
Selettore discendente (spazio)
Nel nesting SASS, il selettore discendente (spazio) viene applicato di default.
Esempio
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}CSS compilato
1.container .header .title {
2 font-size: 20px;
3}Selettore figlio (>)
Se vuoi utilizzare un selettore figlio, scrivi esplicitamente > nel tuo codice SASS.
Esempio
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}CSS compilato
1.container > .header > .title {
2 font-size: 20px;
3}Selettore adiacente (+)
Per stilizzare l'elemento fratello immediatamente successivo, usa +.
Esempio
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}CSS compilato
1.item + .item {
2 margin-top: 10px;
3}Selettore generale dei fratelli (~)
Per stilizzare tutti i fratelli successivi allo stesso livello, usa ~.
Esempio
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}CSS compilato
1.alert ~ .alert {
2 border-top: 1px solid red;
3}Pseudo-classi e pseudo-elementi con il nesting
Anche le pseudo-classi e gli pseudo-elementi possono essere facilmente scritti in SASS.
Esempio
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}CSS compilato
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}Esempio pratico
Di seguito è riportato un esempio di uno stile complesso che combina più combinatori.
Codice SASS
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}CSS compilato
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}Riepilogo
Se comprendi correttamente nesting e combinatori in SASS, puoi scrivere CSS più concisi e leggibili.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.