Я использую Angular5 с sass v1.3.2.
Я хочу иметь возможность изменять цвет, который широко используется в файлах scss моего одностраничного приложения во время выполнения (не путем компиляции новых файлов).
Цвет определяется в моем _variables.css как:
$brand: #123123;
И, например, используется как:
h1 {
color: $brand;
}
Я узнал, что могу изменить цвет, если использую переменные CSS, такие как:
# CSS
:root {
--brand: #123123
}
#JS
document.documentElement.style.setProperty('--brand', '#456456');
# OR
document.querySelector(':root').style.setProperty('--brand', '#456456');
Однако, чтобы сделать это с помощью SCSS, мне нужно было использовать css-vars mixin как таковой:
$brand: #123123;
:root {
@include css-vars((
--brand: #{$brand},
));
}
И используйте его как:
h1 {
color: var(--brand);
}
Две проблемы:
- На самом деле, все еще
--brand не отображается в корне.
Кроме того, CSS, сгенерированный в <script type="text/css"> angular-cli, нигде не имеет --brand, он фактически компилирует переменную CSS в #123123, поэтому получается:
h1 {
цвет: # 123123;
}
Есть идеи о том, как мне добиться изменения глобального цвета во время выполнения? Или как получить мой CSS в :root, а затем как заставить SASS не компилировать его?
UPDATE
Как показал @JonUleis, использовать css-var не нужно. Теперь переменная --brand отображается в DOM на :root.
Однако теперь строка color: var(--brand); по-прежнему не отображается в CSS, а h1 вообще не имеет цветового стиля.
После обновления node-sass до последней 4.9.0 с 4.8.3 все заработало отлично.