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

Question

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

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

虽然我在不同的主题中有不同的价值，但它始终保持价值 #000。

Answer 1

您的 mixin 中的变量仅限于 mixin 的 scope:

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere in their module after they’ve been declared. But that’s not true for all variables. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

所以如果你想在全局层面覆盖$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; }

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

How to change value of global scss variable using mixin in scss?

sass

mixins

scss-mixins