Lorsque l’on travaille avec SCSS, l’imbrication des sélecteurs est une fonctionnalité puissante qui permet de structurer son code de manière plus lisible. Cependant, il arrive parfois que l’on veuille sortir un bloc de styles de cette imbrication tout en conservant une certaine logique dans l’organisation du fichier. C’est là qu’intervient la directive @at-root.

Qu’est-ce que @at-root en SCSS ?

La directive @at-root permet de sortir des règles CSS du contexte d’imbrication dans lequel elles se trouvent. Cela signifie que l’on peut écrire du SCSS de manière imbriquée pour une meilleure organisation, tout en générant du CSS propre et optimisé.

Pourquoi utiliser @at-root ?

• Éviter une imbrication excessive : Une forte imbrication peut conduire à des sélecteurs CSS trop spécifiques et difficiles à maintenir.
• Respecter la hiérarchie des styles : Certaines règles doivent être placées au niveau global pour fonctionner correctement.
• Optimiser le rendu CSS : En générant des sélecteurs plus simples et plus performants.

Exemple d’utilisation avec .navbar-open impactant un footer

Imaginons une situation où nous avons une navbar qui, lorsqu’elle est ouverte (avec .navbar-open appliqué au body), modifie le style d’un autre élément du site, par exemple un footer qui devient rouge.

Voici comment @at-root peut nous aider :

footer {
  background-color: #f1f1f1;
  padding: 20px;

  @at-root body.navbar-open #{&} {
    background-color: red;
    color: white;
  }
}

Explication du code

1. Définition du footer : Il a un style par défaut avec un fond gris clair.
2. Utilisation de @at-root :
   • @at-root extrait la règle du contexte d’imbrication pour qu’elle s’applique globalement.
   • body.navbar-open #{&} signifie que l’on place le sélecteur actuel (footer) après body.navbar-open.

Voici la sortie :

footer {
  background-color: #f1f1f1;
  padding: 20px;
}
body.navbar-open footer {
  background-color: red;
  color: white;
}

Pourquoi est-ce utile ?

• Meilleure organisation du code : On garde l’imbrication logique dans SCSS tout en générant du CSS propre.
• Facilité de maintenance : Il est plus simple d’ajouter des styles globaux sans perturber la structure SCSS.
• Évite une surcharge inutile : On ne génère pas un CSS avec des sélecteurs inutiles et trop spécifiques.

Conclusion

La directive @at-root en SCSS est une excellente solution pour gérer l’imbrication tout en générant un CSS propre et efficace. Elle est particulièrement utile lorsqu’on veut appliquer des styles globaux tout en organisant son code de manière modulaire. En l’utilisant correctement, on améliore la maintenabilité et la performance de nos styles CSS.