如何在 scss 中使用 mixin 更改全局 scss 变量的值？答案

【问题标题】：How to change value of global scss variable using mixin in scss?如何在 scss 中使用 mixin 更改全局 scss 变量的值？
【发布时间】：2020-03-31 02:19:03
【问题描述】：

我想根据主题从 mixin 中更改变量 $primary 的值。但它保持相同的值。如何根据主题更改它？在我的 style-variables.scss 文件中

 $primary: #000;
    @mixin set-color-variable($theme) {
      $primary: #fff;
    }

但它始终保持 #000 的值，尽管我在不同的主题中具有不同的值。

【问题讨论】：

标签： sass mixins scss-mixins

【解决方案1】：

mixin 中的变量仅限于mixin 的scope：

在样式表顶层声明的变量是全局的。这意味着在声明它们之后，可以在其模块中的任何位置访问它们。但并非所有变量都如此。在块中声明的那些（SCSS 中的花括号或 Sass 中的缩进代码）通常是本地，并且只能在它们声明的块内访问。

所以如果你想在全局层面覆盖$primary，你需要添加一个!global标志为：

@mixin set-color-variable($theme) {
  $primary: #fff !global;
}

但是，由于这些变量仅在编译期间使用，这意味着新值将仅用于在 mixin @include:

之后编写的代码

$primary: #000;

@mixin set-color-variable($theme) {
  $primary: #fff !global;
}

.color-1 { color: $primary; }
@include set-color-variable('');
.color-2 { color: $primary; }

将编译为：

.color-1 { color: #000; }
.color-2 { color: #fff; }

【讨论】：