Sass：！global标志与在全局范围内重新定义变量

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;
}

使用此技术，您可以有一个主题混合，可以随时修改全局变量。