动态设置 scss 变量 angular ionic

Posted 2023-03-07

【中文标题】动态设置 scss 变量 angular ionic

【英文标题】：Dynamically set scss variables angular ionic

【发布时间】：2020-06-22 01:11:30

【问题描述】：

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

dynamic-colour: #5260ff

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

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

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

【参考方案1】：

SCSS在编译时被编译为CSS，而SCSS变量在编译时被resolved值替换，也就是说在运行时无法改变变量。然而 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