@at-root

Definition

Directive qui echappe au nesting pour generer le selecteur a la racine du fichier CSS. Utile pour creer des selecteurs freres 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

Generer des selecteurs de theme ou de contexte sans casser la structure du nesting.

Termes lies