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

Question

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

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

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

Answer 1

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

在样式表的顶层声明的变量是global。这意味着声明后即可在模块中的任何位置访问它们。但是，并非所有变量都如此。在块中声明的代码（在SCSS中使用花括号或Sass中的缩进代码）通常为local，并且只能在声明它们的代码块中进行访问。

因此，如果要在全局级别覆盖$primary，则需要添加!global标志为：

!global

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

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

：]中编写的代码。>

@include
将编译为：

$primary: #000;

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

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