css - 更新 sass 用户定义的颜色变量

Question

我创建了一个 Angular 组件 MyComponent，它有一个sass 和主题 文件。

我的组件.component.scss

@import "../styles/common";
@import 'mycomponent.theme';

.element {
  color:$primary
}

在 common.scss 中，我导入了其他文件，例如 variables.scss，其中包含具有预定义或默认颜色的 $primary 和其他主题变量。

在mycomponent.theme.scss中，我定义了@mixin来更新主变量

@mixin mycomponent-theme() {
    $primary: green ;
}

现在创建最终 theme.css 的 theme 文件调用此 @mixin

@include mycomponent-theme();

但是 element 类的 color 没有更新为绿色，因为 mixin 正在更新 $primary 变量。

我做错了吗？或者还有什么其他方法可以实现这一目标？

更新这是代码笔 https://codepen.io/ermarkar/pen/wygwYp?page=1&

Answer 1

您的问题与范围界定有关。

在 mixin mycomponent-theme() 中设置为值 green 的 $primary 变量是一个 局部变量，因此，它仅对该 mixin 内部的代码可见。

即使它与另一个全局变量 同名(我假设它是全局变量)，但它们是不同的变量。

当你写的时候:

.element {
  color:$primary
}

Sass 使用了名为 $primary 的global variable，你的 mixin 没有改变它的值，mixin 创建了一个具有相同的local variable姓名。

有一个very good resource我建议你阅读这有助于理解 Sass 中的变量作用域，比我在这里解释的要好得多。

更新:

我刚刚想到的您可以做的一件事是使用 !global。此关键字允许您从函数或混合 block 内操作全局范围内的变量。

在你的情况下，如果你将你的 mixin 更改为:

@mixin mycomponent-theme() {
    $primary: green !global;
}

然后 mycomponent-theme() 混合将改变全局 $primary 变量。