Articles
Introduction à SASS/SCSS
SASS `@at-root`

SASS `@at-root`

Cet article explique @at-root de SASS.

Nous couvrirons tout, de l’utilisation de base de @at-root à des exemples avancés, étape par étape.

YouTube Video

À propos de SASS @at-root

@at-root est une directive fournie par SASS qui sert à déplacer des sélecteurs ou des propriétés imbriqués de l’imbrication actuelle vers la portée parente. En tirant parti de cette fonctionnalité, vous pouvez contrôler la profondeur d’imbrication et générer le CSS souhaité plus efficacement.

Utilisation de base de @at-root

L’imbrication de SASS rend le code plus lisible, mais une imbrication trop profonde peut produire un CSS non souhaité. En utilisant @at-root, vous pouvez exclure des blocs de code spécifiques de la structure d’imbrication.

Syntaxe de base 

1@at-root {
2  // Code to be output at the parent (root) scope
3}

Exemple d'utilisation 

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}
CSS compilé 
1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}
  • Grâce à @at-root, .nav-item est généré en dehors de .nav.

@at-root dans des sélecteurs imbriqués

Même au sein d’une imbrication profonde, l’utilisation de @at-root permet de déplacer certains sélecteurs au niveau racine. Cela vous permet de produire un CSS maîtrisé même dans des structures complexes.

Exemple d'utilisation 

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}
CSS compilé 
1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}
  • En utilisant @at-root, .card-title est généré en dehors de .card-header.

@at-root avec des arguments

En spécifiant des arguments, @at-root peut être contrôlé de manière plus flexible.

argument without

Lorsque vous utilisez l’argument without, la sortie ignore les portées spécifiées. Autrement dit, vous pouvez supprimer des règles parentes ou des requêtes média.

Exemple d'utilisation 
1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}
CSS compilé 
1.nav__item {
2  color: red;
3}
  • Dans ce cas, @at-root (without: media) exclut la portée des requêtes média, et .nav__item est généré à la racine.

argument with

L’utilisation de with ne conserve dans la sortie que les portées spécifiées. Utile lorsque vous souhaitez produire à la racine tout en préservant certaines portées.

Exemple d'utilisation 
 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}
CSS compilé 
1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}
  • @at-root (with: media) déplace le sélecteur à la racine tout en préservant la structure des requêtes média.

Spécifier plusieurs conditions

Vous pouvez également spécifier plusieurs portées à la fois, séparées par des espaces.

Exemple d'utilisation 
1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}
CSS compilé 
1.global-style {
2  color: green;
3}
  • Dans cet exemple, à la fois rule (sélecteurs classiques) et media (requêtes média) sont exclus ; ainsi, .global-style n’appartient à aucune portée et est entièrement généré au niveau racine. C’est utile lorsque vous souhaitez définir intentionnellement des styles globaux même dans une imbrication complexe.

Combiner avec des requêtes média

Avec @at-root, vous pouvez générer des styles au niveau racine depuis l’intérieur des requêtes @media. Cela vous permet de définir un design responsive au niveau du composant.

Exemple d'utilisation 

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}
CSS compilé 
1.container-large {
2  width: 80%;
3}
  • Avec @at-root, vous pouvez également produire des styles au niveau racine depuis l’intérieur de requêtes média. Cela facilite la définition de styles globaux indépendants pour chaque point de rupture.

Cas d’utilisation de @at-root

@at-root est pratique lorsque vous voulez produire des styles au niveau racine sous certaines conditions. C’est particulièrement utile pour gérer des requêtes média ou des styles spécifiques à un thème à l’intérieur de composants.

Séparer composants et thèmes

En utilisant @at-root, vous pouvez générer des classes globales indépendantes même depuis l’intérieur de requêtes média. Cela facilite l’organisation des thèmes et des états par composant.

Exemple d'utilisation 
 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}
CSS compilé 
 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}
  • Dans cet exemple, tout en définissant des styles pour le thème sombre à l’intérieur de .card, @at-root génère une classe .card-dark distincte. Cela vous permet de basculer les classes de manière flexible entre différents thèmes.

Notes

Lorsque vous utilisez @at-root, gardez les points suivants à l’esprit.

  1. Évitez l’usage excessif @at-root est puissant, mais en abuser peut obscurcir l’intention de votre imbrication.

  2. Clarifiez l’intention Laisser des commentaires sur la raison de l’utilisation de @at-root facilite la compréhension pour les autres développeurs.

  3. Soyez attentif à la cohérence des portées Déplacer la sortie à la racine peut modifier les dépendances de style. Soyez clair sur les éléments auxquels cela s’applique.

  4. Combiner avec d’autres fonctionnalités de SASS Combiner @at-root avec @mixin et @function permet une conception CSS plus flexible.

Résumé

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Combinateurs dans l’imbrication