@at-root

Définition

Directive qui échappe au nesting pour générer le sélecteur a la racine du fichier CSS. Utile pour créer des sélecteurs frères ou globaux depuis un contexte imbrique.

Analogie

Sortir de l'immeuble pour planter un arbre dans le jardin commun, pas sur ton balcon.

Exemple de code

.card {
  color: black;
  @at-root .theme-dark #{&} {
    color: white;
  }
}
// CSS: .theme-dark .card { color: white; }

Cas d'usage

Générer des sélecteurs de theme ou de contexte sans casser la structure du nesting.

Termes liés