CSS: annidamento dei blocchi in SASS

L'annidamento dei blocchi è una caratteristica peculiare di SASS.

Con i CSS i blocchi annidati vengono espressi in termini di stili discendenti, ossia:

#footer {
    text-align: center;
}

#footer p {
    font-size: 0.85em;
}

In SASS l'annidamento viene invece reso sintatticamente esplicito.

#footer {
    text-align: center;
    
    p {
        font-size: 0.85em;
    }
}

L'annidamento interessa anche gli pseudo-elementi e le pseudo-classi. Se nei CSS abbiamo:

#footer {
    text-align: center;
}

#footer a {
    color: #666;
}

#footer a:hover {
    color: #000;
}

In SASS avremo:

#footer {
    text-align: center;
    
    a {
        color: #666;
                
                &:hover {
                   color: #000; 
                }

    }
}

Il token & è un riferimento all'elemento genitore di ogni pseudo-classe e pseudo-elemento (in questo caso è un riferimento all'elemento a).