Sass – Le basi: Annidamento / Nesting

Sass è un’estensione del linguaggio CSS che permette di utilizzare variabili, di creare funzioni e di organizzare il fogli di stile in più file.

Il linguaggio Sass si basa sul concetto di preprocessore CSS, il quale serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso.

Tra le caratteristiche peculiari di Sass, forse la più importante, di cui sentiamo spesso parlare è l’Annidamento (Nesting). Uno dei motivi per cui usiamo un preprocessore durante la formulazione dei nostri fogli di stile è quello di diminuire il numero di regole di stile CSS. L’annidamento ci permette di usare delle scorciatoie per creare le nostre regole.
Chiaramente un uso eccessivo di annidamenti può portare a fogli difficilmente gestibili.

Cos’è l’Annidamento

L’annidamento permette di scrivere selettori che mimino la struttura del vostro codice HTML. Dunque usare delle scorciatoie per creare il vostro CSS. Un esempio:

div {
    p {
        color: black;
    }
}

Questo è un semplicissimo esempio d’annidamento. L’elemento div racchiude l’elemento p. Questo si compilerà in:

div p { color: black; }

Avremmo potuto anche dare al div delle proprietà:

div {
    font-size: 14px;
    p {
        color: black;
    }
}

Questo si traduce in due regole separate, una per il div stesso e l’altra per l’elemento p dentro al div.

div { font-size: 14px; }
div p { color: black; }

Come usare l’Annidamento

Gli stili d’annidamento sono abbastanza semplici. E’ sufficiente racchiudere il selettore o i selettori all’interno delle parentesi graffe di un altro selettore:

.parent {
    .child {
    }
}

L’annidamento si può estendere in un numero arbitrario di livelli, dunque la profondità non ha limiti. In un modo simile:

.first-level {
    .second-level {
        .third-level {
            .fourth-level {
            }
        }
    }
}

Non c’è realmente limite al numero di livelli di profondità. L’unica cosa da ricordare è che, solo perchè riuscite a fare qualcosa non vuol dire che dovete sempre farlo. Infatti di norma è buona idea non effettuare un Annidamento che vada oltre il 3 livello. Questo non garantisce infatti la leggibilità e la facilità di manutenzione del codice.

.page {
    font-family: sans-serif;
    .content {
        background-color: black;
        .text {
            color: white;
            font-size: 12px;
            .headline {
                font-weight: bold;
                a {
                    color: blue;
                    &:visited {
                        color: green;
                    }
                    &:hover {
                        color: red;
                    }
                    &:active {
                        color: yellow;
                    }
                }
            }
        }
    }
 
}

Anche se sembra abbastanza innocente l’output compilato risultante è il seguente:

.page { font-family: sans-serif; }
 
.page .content { background-color: black; }
 
.page .content .text { color: white; font-size: 12px; }
 
.page .content .text .headline { font-weight: bold; }
 
.page .content .text .headline a { color: blue; }
 
.page .content .text .headline a:visited { color: green; }
 
.page .content .text .headline a:hover { color: red; }
 
.page .content .text .headline a:active { color: yellow; }

Questo presenta infatti un problema se cambiassimo la struttura principale della pagina. Assumiamo per esempio di voler cambiare .content a questo ponto tutte le classi sottostanti devono essere riscritte in quanto dipendono dall’essere all’interno di .content.

Referenziare i selettori padre

Nell’esempio sopra abbiamo usato un terribile & per specificare dove dev’essere piazzato il selettore genitore. Il simbolo : è usato nell’esempio sopra per creare una pseudo-classe dell’elemento ancora.

a {
    color: blue;
    &:visited {
    color: green;
    }
    &:hover {
    color: red;
    }
    &:active {
    color: yellow;
    }
}

viene compilato in:

a { color: blue; }
 
a:visited { color: green; }
 
a:hover { color: red; }
 
a:active { color: yellow; }

Che già di per se è facilmente leggibile da chiunque.

Si può usare anche & per costruire dei selettori composti. Aggiungendo a & un suffisso, in questo modo:

.col {
    &-span1 { width: 8.33%; }
    &-span2 { width: 16.66%; }
    &-span3 { width: 24.99%; }
}

Che ci da

.col-span1 { width: 8.33%; }
.col-span2 { width: 16.66%; }
.col-span3 { width: 24.99%; }

Come facilmente si può notare il simbolo & viene sostituito dal nome del selettore in cui si trova.

Proprietà Annidate

Sass permette l’uso di scorciatoie per specificare alcune proprietà. Normalmente quando si configurano delle proprietà nello stesso Namespace, per esempio border, dobbiamo scrivere ogni singola proprietà nel nostro foglio di stile. Con Sass possiamo scrivere il namespace una sola volta e poi annidare le sue proprietà, in questo modo:

.example {
    border: {
        style: dashed;
        width: 30px;
        color: blue;
    }
}

che viene compilato in:

.example {
    border-style: dashed;
    border-width: 30px;
    border-color: blue;
}

Come si vede, il namespace viene aggiunto ad ogni proprietà.

Conclusioni

Ora che sapete cos’è l’Annidamento in Sass, provate a usarlo in modo responsabile. Vedrete che renderà molto più leggibili i vostri fogli di stile e risparmierete molto tempo!