L’indicateur `!global` dans SASS

Cet article explique le drapeau !global dans SASS.

Nous expliquerons le mécanisme détaillé, des exemples d’utilisation et les précautions du drapeau !global.

YouTube Video

L’indicateur !global dans SASS

Dans SASS, l’indicateur !global est utilisé pour manipuler la portée des variables. En comprenant bien cet indicateur et en l’utilisant de façon appropriée, vous pouvez éviter des comportements inattendus dans votre code et améliorer sa maintenabilité.

Qu’est-ce que l’indicateur !global ?

Normalement, les variables SASS ont une portée. Par défaut, les variables ne sont valables que dans la portée dans laquelle elles sont définies. Autrement dit, si une variable est définie dans une fonction ou un mixin, elle ne pourra pas être utilisée en dehors de cette portée.

Cependant, en utilisant l’indicateur !global, vous pouvez directement assigner la variable à la portée globale. Cela permet de partager les variables entre différentes portées.

Sans l’indicateur !global

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• Dans ce code, $color est défini dans la portée globale, donc la propriété color de .change reste red.

CSS généré

1.change {
2    color: red;
3}

Avec l’indicateur !global

Ajoutons l’indicateur !global au même exemple.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• Dans ce cas, puisque l’indicateur !global est précisé, la valeur de $color est mise à jour dans la portée globale. En conséquence, la propriété color de .change devient blue.

CSS généré

1.change {
2    color: blue;
3}

Précautions d’utilisation

• Pollution de la portée globale Une utilisation excessive de l’indicateur !global peut entraîner des conflits de portée inattendus et une pollution de la portée globale. Ceci est particulièrement important dans les grands projets, où il convient d’éviter une utilisation excessive de ce drapeau.

• Écrasements de valeurs non intentionnels Lors de l’utilisation du drapeau !global, des variables du même nom peuvent être accidentellement écrasées autre part. Par conséquent, une dénomination cohérente et claire des variables est nécessaire.

Exemple pratique

Voici un exemple d’utilisation correcte du drapeau !global.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• Dans ce code, le mixin set-theme peut être utilisé pour changer de thème dynamiquement. Comme les variables globales sont mises à jour pour chaque thème, plusieurs thèmes peuvent être gérés de manière flexible.

CSS généré

1body {
2    background-color: #333333;
3    color: #666666;
4}

Erreurs courantes et mesures à prendre

Oubli du drapeau

Si vous oubliez d’ajouter !global, les variables peuvent ne pas être mises à jour dans la portée souhaitée. Veillez à ajouter explicitement le drapeau lorsque cela est nécessaire.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

Dépendance excessive à la portée globale

S’appuyer trop fortement sur le drapeau !global peut rendre le débogage et la maintenance du code difficiles. Son utilisation doit être réduite au minimum.

Résumé

Le drapeau !global dans SASS est très utile dans des situations spécifiques, mais il doit être utilisé avec précaution. En comprenant clairement la portée des variables et en gérant correctement la portée globale, vous pouvez écrire un code SASS très facile à maintenir.

Voici les points clés à retenir :.

1. Les variables dépendent par défaut de leur portée.

2. Le drapeau !global permet de mettre à jour des variables dans la portée globale.

3. Limitez l’utilisation des drapeaux au minimum et évitez les écrasements accidentels autant que possible.

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