Question

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

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

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

Answer 1

您的mixin中的变量仅限于mixin的{{3}}：

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

因此，如果要在全局级别覆盖$primary，则需要添加一个scope标志，如下：

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

将编译为：

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

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

1 个答案: