Comprendre la directive @at-root pour désimbriquer le CSS en Sass

Question

Si je comprends bien, son utilité principale est de "désimbriquer" du CSS imbriqué ?
Exemple :
.parent {
@at-root {
.enfant {
color: red; // Sera généré en dehors de ".parent"
}
}
}
Pour utiliser ces classes ailleurs par la suite ?

Louis-Nicolas Leuillet · Accepted Answer

Exactement, tu as bien compris le principe ! @at-root permet de "sortir" un sélecteur de l'imbrication dans laquelle il se trouve, pour qu'il soit compilé à la racine du CSS généré.
Avec ce code :
.parent {
@at-root {
.enfant {
color: red;
}
}
}
Le CSS compilé donnera simplement .enfant { color: red; } au lieu de .parent .enfant { color: red; } . Du coup, oui, ça te permet de garder une organisation logique dans ton fichier SCSS (regrouper des choses qui ont un lien ensemble) tout en évitant que le sélecteur parent ne se retrouve dans le CSS final :)

Comprendre la directive @at-root pour désimbriquer le CSS en Sass

Codez dans vos feuilles de style grâce à SASS et SCSS