Articles
Введение в SASS/SCSS
Флаг `!global` в SASS

Флаг `!global` в SASS

В этой статье объясняется флаг !global в SASS.

Мы объясним подробный механизм, примеры использования и меры предосторожности флага !global.

YouTube Video

Флаг !global в SASS

В SASS флаг !global используется для управления областью видимости переменных. Правильное понимание и оптимальное использование этого флага помогает избежать неожиданного поведения кода и повысить его поддерживаемость.

Что такое флаг !global?

Обычно переменные SASS имеют область видимости. По умолчанию переменные действуют только в пределах той области, где они были определены. Другими словами, если переменная определена внутри функции или миксина, обратиться к ней извне невозможно.

Однако с помощью флага !global можно напрямую назначить переменную в глобальную область видимости. Это позволяет переменным использоваться в разных областях видимости.

Без флага !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}
  • В этом примере $color определён в глобальной области, поэтому свойство color у .change остаётся red.

Результирующий CSS 

1.change {
2    color: red;
3}

С флагом !global

Добавим флаг !global в тот же пример.

 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}
  • В этом случае, благодаря флагу !global, значение $color обновляется в глобальной области. В результате свойство color у .change становится blue.

Результирующий CSS 

1.change {
2    color: blue;
3}

Меры предосторожности

  • Загрязнение глобальной области Чрезмерное использование флага !global может привести к неожиданным конфликтам областей видимости и загрязнению глобальной области. Это особенно важно в крупных проектах, где чрезмерное использование этого флага следует избегать.

  • Непреднамеренное перезаписывание значений При использовании флага !global переменные с одинаковым именем могут быть непреднамеренно перезаписаны в другом месте. Поэтому необходимы последовательное и чёткое именование переменных.

Практический пример

Ниже приведён пример правильного использования флага !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}
  • В этом коде миксин set-theme можно использовать для динамического переключения тем. Поскольку глобальные переменные обновляются для каждой темы, несколькими темами можно управлять гибко.

Результирующий CSS 

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

Распространённые ошибки и меры противодействия

Забытая установка флага

Если забыть добавить !global, переменные могут не обновляться в предполагаемой области видимости. Обязательно явно добавляйте этот флаг, когда это необходимо.

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}

Чрезмерная зависимость от глобальной области видимости

Слишком сильная зависимость от флага !global может затруднить отладку и сопровождение кода. Его использование следует свести к минимуму.

Резюме

Флаг !global в SASS очень полезен в некоторых ситуациях, но его следует использовать с осторожностью. Чётко понимая область видимости переменных и правильно управляя глобальной областью, можно создавать легко поддерживаемый код SASS.

Ниже приведены основные моменты, которые следует помнить:.

  1. По умолчанию переменные зависят от своей области видимости.

  2. Флаг !global позволяет обновлять переменные в глобальной области видимости.

  3. Старайтесь минимизировать использование флагов и по возможности избегайте непреднамеренного перезаписывания значений.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Флаг `!default` в SASS