我创建了一个角度组件 MyComponent，其中包含 sass 和主题文件。
mycomponent.component.scss
@import "../styles/common";
@import 'mycomponent.theme';
.element {
color:$primary
}
在 common.scss 中，我导入了其他文件，例如 variables.scss ，其中包含$primary预定义或默认颜色以及其他主题变量。< / p>
在 mycomponent.theme.scss 中，我定义了@mixin来更新主变量
@mixin mycomponent-theme() {
$primary: green ;
}
现在创建最终 theme.css 的主题文件调用此@mixin
@include mycomponent-theme();
但由于mixin正在更新element变量，color类的$primary未更新为绿色。
我犯了什么错吗？或者实现这个目标的另一种方法是什么？
更新 这是codepen https://codepen.io/ermarkar/pen/wygwYp?page=1&
答案 0 :(得分：1)
您的问题与范围界定有关。
您在mixin $primary中设置为值green的{{1}}变量是本地变量，因此，它只对代码可见那是在混合中。
即使它与另一个全局变量（我假设它是全局变量）具有相同的名称，它们也是不同的变量。
当你写道：
mycomponent-theme() Sass使用了名为.element {
color:$primary
}
的全局变量，mixin的值没有变化，mixin创建了一个名称相同的局部变量。
我建议你阅读very good resource，这有助于理解Sass中的变量范围，比我在这里解释的要好得多。
<强>更新
我能想到的一件事就是使用$primary。此关键字允许您从函数或mixin块中操作全局范围中的变量。
在您的情况下，如果您将mixin更改为：
!global然后@mixin mycomponent-theme() {
$primary: green !global;
}
mixin将更改全局mycomponent-theme()变量。