Sass:! Глобальный флаг против переопределения переменной в глобальной области видимости

Question

Почему бы вам никогда не использовать:

.highlight {
  $orange: #f60 !global;
  color: $orange;
}

... вместо ...

$orange: #f60;
.highlight {
  color: $orange;
}

Почему бы вам не переопределить переменную в глобальной области, а не использовать!global

Answer 1

Один вариант использования для флага !global - для темы. Вот пример:

$fg-color: black;
$bg-color: gray;

@mixin darkTheme() {
  $fg-color: white !global;
  $bg-color: blue !global;
}

@include darkTheme();

main {
  background: $bg-color;
  color: $fg-color;
}

Вышеуказанный SCSS соответствует этому CSS:

main {
  background: blue;
  color: white;
}

Используя эту технику, вы можете создать тематический миксин, который корректно изменяет глобальные переменные в любое время.