Angular:如何动态更改 scss 变量？

Question

我是 scss 的新手，所以我想知道我是否可以使用组件的 Typescript 更改 scss 变量。

考虑一下:

html: 
<div (someEvent)="handleEvent($event)"></div>

scss: 
$thememode: 'theme1'; 
$textcolormode: 'nonHover'; 
$colorOpacity: 0.1; 
@mixin someFunction(param1, param2){
    //do scss magic
}

ts: //Here is what I want to do, but dont know to code:
handleEvent(event):void{
   this.scssFile.$thememode = 'theme2'; 
   this.scssFile.$colormode = 'hover'; 
   this.scssFile.$colorOpacity = this.someattribute + this.someServive.$generateAnotherValue(someParam); 
   this.scssFile.@someFunction(23, 'mode1'); 
}

基本上我只想能够访问我定义的 scss 变量/mixin。

有办法吗？

Answer 1

无法从 Angular 组件中操作 Sass 文件，因为在 Angular 访问您的组件时，Sass 已经编译为 CSS。你应该使用 NgStyle和 NgClass实现这一目标的指令。