Dynamically set scss variables angular ionic

Question

I have an API call that would get a json with my scss colours, such as

dynamic-colour: #5260ff

but this variable doesn't get called until run time of the ionic app. Was setting scss variables dynamically before compile time even possible?

From most of the angular examples I've seen, they already have a preset colour set, and I don't see any examples of what I want to achieve. Is it possible to preset a variable, but override it when running the app?

任何人都知道如何从 API 调用动态获取 scss 变量并设置全局变量值？我相信可以运行一个打字稿函数来用我想要的东西覆盖每个页面的 scss。

Answer 1

SCSSCSS在编译时编译为，SCSS 变量在编译时替换为已解析的值，这意味着在运行时无法更改变量。然而 css 变量就在那里，你可以很容易地改变它们，

例如：

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

现在您可以从您的组件更改其值，例如：

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

您也可以分配--dynamic-colour给您的 scss 变量，这样您就不必在多个地方进行更改：

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

STACKBLITZ 工作演示