Question

我在我的angular 7项目中使用了SASS（.scss）。它有多个主题。因此，我必须为每个主题动态更改全局样式。但是我的@if条件返回false。

styles.scss：

@import "app/themes/Atlantis/master-style.atlantis.scss";


:root{
  --theme: false
}

@if var(--theme) == 'atlantis'{
  //@include master-style-atlantis;
  html {
    background:red; // sample code to check if my @if worked
  }
}

我将--theme道具添加到有角度的app.component.ts中：

 _document = document.querySelector('html');

 ngOnInit(): void {
   this._document.style.setProperty('--theme', 'atlantis');
 }

将html属性设置为style="--theme:atlantis;"，但背景颜色不变。但是如果我使用

@if var(--theme){
  //@include master-style-atlantis;
  html {
    background:red; // sample code to check if my @if worked
  }
}

有效。如果是，则为true / false。但是比较字符串总是返回false。请帮忙。

Answer 1

Sass是前置处理器。当您在angular的--theme: prop生命周期钩子上应用ngOnInit时，它没有对该属性更改的相关引用。因此，@if var(--theme) == 'atlantis'总是会返回false，因为Sass在设置之前就运行了很长时间。

第二个“有效”示例“有效”的原因是因为sass在运行时确实会在其中找到var(--theme)属性。

您可能会read up更多地采用更有效的策略来实现自己的目标。希望这会有所帮助，加油！

与字符串

1 个答案: