Annidamento in SASS

Questo articolo spiega l’annidamento in SASS.

Spiegheremo l’annidamento in SASS passo dopo passo, includendo codice di esempio per approfondire la comprensione.

YouTube Video

Annidamento in SASS

SASS è un linguaggio di fogli di stile esteso per CSS che offre molte funzionalità per una stilizzazione efficiente. Tra queste, l’annidamento è una funzione particolarmente utile per rappresentare visivamente la struttura gerarchica del CSS.

Basi dell’Annidamento

In SASS, puoi organizzare il tuo codice visivamente scrivendo i selettori CSS in una struttura gerarchica. Ad esempio, vediamo come puoi riscrivere il seguente codice CSS utilizzando l’annidamento.

 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}

Utilizzando SASS, puoi scrivere questo codice in modo conciso attraverso l’annidamento come mostrato di seguito.

 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}

• Questo codice utilizza la funzione di annidamento in SASS per descrivere in modo conciso e gerarchico gli stili del menu di navigazione. Utilizzando l’annidamento, le relazioni genitore-figlio diventano visivamente chiare e la leggibilità migliora.

Fare riferimento ai selettori genitore (&)

Quando hai bisogno di fare riferimento al selettore genitore all’interno di stili annidati, utilizza &. Questo ti permette di creare selettori con stati o modificatori specifici.

 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}

• Questo codice utilizza & in SCSS per definire gli stati :hover e :active per il selettore genitore .button.

CSS generato

 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}

Annidare le Media Query

In SASS, puoi annidare anche le media query. Ciò ti consente di implementare un design responsive mantenendo la pertinenza dei tuoi stili.

 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}

• Questo codice annida una media query all’interno della classe .container, abilitando un design responsive che cambia larghezza in base alla dimensione dello schermo.

CSS generato

 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}

Punti da considerare sull’annidamento

Un uso eccessivo di annidamento può rendere il codice troppo stratificato e ridurre la manutenibilità. Dovresti evitare un annidamento profondo come nell’esempio qui sotto.

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

Questo tipo di codice è troppo annidato, quindi può essere rifattorizzato come segue.

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

Esempio pratico: Barra di navigazione

Di seguito un esempio di stilizzazione della barra di navigazione utilizzando l’annidamento in SASS.

 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}

• Questo codice organizza e definisce gli stili per le liste e i link all’interno della barra di navigazione, inclusi gli effetti hover, usando l’annidamento in SASS.

CSS generato

 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}

Riepilogo

La funzione di annidamento in SASS è uno strumento potente per descrivere in modo conciso la struttura gerarchica del CSS e migliorare la leggibilità. Tuttavia, è importante evitare l’annidamento eccessivo e organizzare correttamente il proprio codice.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video