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

主题变量.scss

//---------------------------------------------------------
//Declare a global variable and set it to red color
//---------------------------------------------------------
$fg-primary-text: red; 

//---------------------------------------------------------
//below @mixin is used in styles.scss to pass the custom-theme
//---------------------------------------------------------
@mixin cache-theme-colors($theme) {
   @include set-global-variables($theme);
}

//---------------------------------------------------------
//local mixin to set the global-variable from the $theme using !global flag
//---------------------------------------------------------
@mixin set-global-variables($theme: $theme, $fg-primary-text: $fg-primary-text) {
 $foreground: map-get($theme, foreground); //get foreground from the theme
 $fg-primary-text: mat-color($foreground, text) !global; //get the text color from the theme and set it here using the !global flag

}

组件.scss

@import "../../../../assets/themes/theme-variables.scss";

.text-color {
    color: $fg-primary-text;  //use the variable (but it is still red)
}

但颜色还是红色我的问题是：如何在 scss 中设置全局变量并在 mixin/function 中更改它并在任何 component.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);

要了解有关如何构建 Angular 项目主题的更多信息，您可以查看https://github.com/angular/material.angular.io

这是 Angular Material io 文档网站的官方存储库。

EDIT

我想这也回答了你的问题

如何在 Angular2 组件中操作 scss 变量