与字符串比较时，SASS 中的 @if 条件返回 false答案

【问题标题】：@if condition in SASS returns false when comparing to string与字符串比较时，SASS 中的 @if 条件返回 false
【发布时间】：2019-09-30 14:08:34
【问题描述】：

我在 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
  }
}

它有效。如果它是真/假，如果会起作用。但是比较字符串总是返回 false。请帮忙。

【问题讨论】：

标签： sass angular7

【解决方案1】：

Sass 是一个预处理器。当您在 Angular 的 ngOnInit 生命周期挂钩上应用 --theme: prop 时，它与该属性更改没有相关参考。所以@if var(--theme) == 'atlantis' 应该总是返回 false，因为 Sass 早在设置之前就运行了。

您的第二个“工作”示例“工作”的原因是 sass 在运行时确实会在那里找到 var(--theme) 属性。

您可能会read up 更多地了解实现目标的更有效策略。希望这会有所帮助，干杯！

【讨论】：