Présentation
Pour aller plus loin

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 codee 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.