angular - 动态设置 scss 变量 angular ionic

Question

我有一个 API 调用，它会得到一个带有我的 scss 颜色的 json，例如

dynamic-colour: #5260ff

但是直到 ionic 应用程序运行时才会调用此变量。甚至可能在编译时间之前动态设置 scss 变量吗？

从我见过的大多数 Angular 示例中，它们已经有一个预设的颜色集，我没有看到任何我想要实现的示例。是否可以预设一个变量，但在运行应用程序时覆盖它？

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

Answer 1

SCSS编译为 CSS在编译期间，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 WORKING DEMO