@if условие в SASS возвращает false при сравнении со строкой

Question

Я использую SASS (.scss) для своего углового 7 проекта. Это имеет несколько тем. Поэтому я должен динамически менять глобальные стили для каждой темы. Но мое условие @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
  }
}

Добавляю - опору темы с угловой, app.component.ts:

 _document = document.querySelector('html');

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

html prop устанавливается как style="--theme:atlantis;", но цвет фона не меняется. Но если я использую

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

это работает. Если это правда / ложь, если будет работать. Но сравнение строк всегда возвращает false. Пожалуйста, помогите.

Answer 1

Sass является pre -процессором.К тому времени, когда вы применяете --theme: prop к хуку жизненного цикла angular ngOnInit, он не имеет соответствующей ссылки на это изменение свойства.Так что @if var(--theme) == 'atlantis', как ожидается, всегда будет возвращать false, поскольку Sass запускается задолго до того, как он установлен.

Причина, по которой ваш второй "рабочий" пример "работает", заключается в том, что sass действительно найдет там свойство var(--theme), когда оноработает.

Вы могли бы прочитать немного больше о более эффективной стратегии для достижения вашей цели.Надеюсь, это поможет, ура!