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

我已经创建了一个具有sass和主题文件的角度组件MyComponent

mycomponent.component.scss

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

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

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

现在，创建最终theme.css的主题文件称为@mixin

但是元素类的颜色没有更新为绿色，因为mixin正在更新$primary变量

我犯了什么错误吗？或者，实现这一目标的另一种方式是什么

更新

---

这是代码笔

您的问题与范围界定有关

在mixin mycomponent主题中设置为绿色值的$primary变量是一个局部变量，因此，它仅对该mixin中的代码可见

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

当你写道：

.element {
  color:$primary
}

Sass使用名为$primary的全局变量，mixin的值没有改变，mixin创建了一个同名的局部变量

我建议您阅读一篇有助于理解Sass中变量作用域的文章，这篇文章比我在这里解释的要好得多

更新：

我刚刚想到的一件事，你可以做，那就是使用！全球的此关键字允许您在函数或mixin块内操作全局范围内的变量

在您的情况下，如果您将mixin更改为：

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

---

然后mycomponent主题mixin将更改全局$primary变量。

不工作是什么意思？你可以用你正在运行的所有代码创建一个代码笔演示吗？它在你的代码笔演示中不起作用，因为你在使用变量后调用了你的mixin。当代码变为color:$primary时，$primary变量的值仍然是蓝色的。只有在这之后，你才能将它的值改为绿色。那么我该如何解决这个问题呢？实际上，组件是一个库，theme.scss文件将是消费者应用程序的一部分，该应用程序将使用从库中导出的scss中的mixin。

.element {
  color:$primary
}

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