L'imbrication

Voir la vidéo
Description Sommaire

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.

Publié
Technologies utilisées
Auteur :
Grafikart
Partager