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变量/混合。

有没有办法做到这一点？

Answer 1

无法从Angular组件操纵Sass文件，因为在Angular访问您的组件时，Sass已被编译为CSS。您应该使用NgStyle和NgClass指令来实现此目的。

Answer 2

Scss是预处理器。是否在编译时转换为常规CSS。这意味着您无法在运行时修改Scss，因为它不再存在。

动态管理主题的另一种方法是使用css variables并动态更新主题。

Answer 3

正如其他人已经提到的那样，一个好方法是使用CSS变量。即使您必须支持IE11，也可以，因为有一个适用于此的ponyfill。请注意，您还可以混合使用SCSS和CSS属性，只需定义一些CSS属性并在SCSS定义中使用它们，生成的CSS仍将包含CSS属性。

我在我的项目中使用了完全相同的方法，在该项目中，我在运行时解析了配置文件中的一些颜色值，然后根据这些值设置css属性：

  ngAfterViewInit() {
    const options: any = {
      watch: true,
      preserveStatic: false,
      variables: {
        '--accent': AppConfigService.settings.style.accent,
        '--contrast': AppConfigService.settings.style.contrast,
        '--page-color': AppConfigService.settings.style.pagecolor,
        '--page-contrast': AppConfigService.settings.style.pagecontrast,
        '--text-color': AppConfigService.settings.style.textcolor,
        '--info-color': AppConfigService.settings.style.infocolor,
        '--warn-color': AppConfigService.settings.style.warncolor,
        '--white': AppConfigService.settings.style.white
      }
    };
    cssVars(options);
  }

提到的ponyfill是 css-vars-ponyfill

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

3 个答案: