Formation Le préprocesseur SASS : L'imbrication

La syntaxe SCSS permet de faire de l'imbrication.

.btn {
    background: #FFF;

    .icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: red;
    }

    &:hover {
        background: #000;
    }

}

Ce qui génèrera le code suivant :

.btn {
    background: #FFF;
}
.btn .icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: red;
}
.btn:hover {
    background: #000;
}

Cette imbrication permet de regrouper les règles affectées par un même parent et de garder le code organisé. En revanche, il faudra garder en tête les bonnes pratiques CSS et éviter de trop imbriquer les règles au risque de créer des règles trop complexes.