Динамически устанавливаемые s css переменные angular ионные

Question

У меня есть вызов API, который бы получил json с моими цветами s css, такими как

dynamic-colour: #5260ff

, но эта переменная не вызывается до времени выполнения ioni c приложение Была ли возможность динамически устанавливать переменные s css до времени компиляции?

Из большинства angular примеров, которые я видел, у них уже есть предустановленный набор цветов, и я не вижу примеров того, чего я хочу достичь. Можно ли предварительно установить переменную, но переопределить ее при запуске приложения?

Кто-нибудь знает, как выполнить sh динамическое получение переменных css из вызова API и установку значений глобальных переменных? Я считаю, что можно запустить функцию машинописного текста, чтобы переопределить s css каждой страницы с тем, что я хочу.

Answer 1

SCSS компилируется в CSS во время компиляции, а переменные S CSS заменяются разрешенным значением во время компиляции, что означает, что невозможно изменить переменную во время выполнения. Однако css переменные просто находятся там, и вы можете легко их изменить,

, например:

:root{
   --dynamic-colour: #5260ff
}

, теперь вы можете изменить его значение из своего компонента, например:

changeColor(color:string){
   document.documentElement.style.setProperty('--dynamic-colour', color);
}

Также вы можете назначить --dynamic-colour для вашей переменной s css, чтобы вам не приходилось вносить изменения в нескольких местах:

$dynamic-colour: var(--dynamic-colour);

STACKBLITZ WORKING DEMO