Les imbrications en Sass

Sass vous permet d'imbriquer vos sélecteurs CSS d'une façon qui suit la même hiérarchie que votre code HTML.

Voici un exemple d'une barre de menu qui pourrait contenir certains styles typiques pour la navigation de votre site :

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li { display: inline-block; }

    a {
        color: #666;
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

Vous remarquerez que les sélecteurs ul, li et a sont imbriqués à l' intérieur du sélecteur nav. C'est un excellent moyen d'organiser votre CSS et de le rendre plus lisible. Lorsque vous générez votre CSS, vous obtiendrez ceci :

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    color: #666;
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}