Sass 如何更改scss mixin中的全局变量

theme-variables.scss

component.scss

但颜色仍然是红色

---

我的问题是：如何在scss中设置全局变量，并在mixin/函数中更改它，然后在任何组件中使用它。scss

您将需要在component.scss中使用mixin函数

然后在main.scss文件中添加一个@include

组件.scss

@mixin text-color-mixin($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  .text-color {
    color: if($is-dark-theme, red, blue);
  }
}

@import ..<path to file>.../component.scss
...
<Other code>
...
@include  text-color-mixin($theme);

main.scss

@mixin text-color-mixin($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  .text-color {
    color: if($is-dark-theme, red, blue);
  }
}

@import ..<path to file>.../component.scss
...
<Other code>
...
@include  text-color-mixin($theme);

@import../component.scss
...
...
@包括文本颜色混合（$主题）；

要了解更多有关如何构建角度项目主题的信息，请查看

这是angular material io文档站点的官方回购

编辑

我想这也回答了你的问题

至少我找到了一个解决方案，我在这里为那些需要它的人分享

注意：我知道它很长。。但是耐心地阅读，你可能会有所收获 如果我做错了什么，请纠正我。

首先从theme.service开始

主题服务.ts

@mixin text-color-mixin($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  .text-color {
    color: if($is-dark-theme, red, blue);
  }
}

@import ..<path to file>.../component.scss
...
<Other code>
...
@include  text-color-mixin($theme);

从'@angular/core'导入{Injectable}；
从'@angular/cdk/overlay'导入{OverlayContainer}；
@可注射（{providedIn:'root'}）
导出类主题服务{
构造函数（专用OverlyContainer:OverlyContainer）{}
currentThemeNAME:string=“轻主题”；
//默认主题
private-defaultThemeNAME:string=“light-theme”；
setDefaultTHEME（）{
this.setTHEME（this.defaultThemeNAME）；
}
//灯光主题
private-lightThemeNAME:string=“light-theme”；
setLightTHEME（）{
this.setTHEME（this.lightThemeNAME）；
}
//黑暗主题
private darkThemeNAME:string=“黑暗主题”；
塞达克切姆（）{
this.setTHEME（this.darkThemeNAME）；
}
//设置主题的步骤
设置主题（主题名：字符串）{
console.log（themeNAME）；
this.currentThemeNAME=themeNAME；
this.OverlyContainer.getContainerElement（）.classList.add（this.currentThemeNAME）；
}
//循环主题
循环时间（）{
开关（此.currentThemeNAME）{
case this.lightThemeNAME：
这个。setDarkTHEME（）；
打破
本例为darkThemeNAME：
这个.setLightTHEME（）；
打破
}
}
}

这就是问题所在，当我动态更改主题时，我需要将其传递给所有组件。假设我有130+个组件，那么我必须使用所有130+个组件的@include mixin。当我更改主题并在任何组件中使用它时，最好将颜色值存储在全局变量中。你不能这样做，因为scss编译为css，样式表中没有变量。但是，即使你有200个变量，我也不明白，如果你只是从主题派生css类，为什么你必须把css类放在所有130多个组件中。您可以将其包含在main.scss文件中，并在所有组件中使用该css类。您正在做的是一个特定的用例吗？实际需求是：1）我们需要一个单独的全局颜色变量文件，其中包含所有$color变量。2） 当应用程序主题更改时，将$theme对象传递到全局颜色变量文件，并从主题中填充这些$color变量，3）现在在任何组件中导入颜色文件，4）使用颜色变量设置html元素的样式。