Question

我有一个API调用，它将获取具有我的scss颜色的json，例如

List<Annotation> annotations = this.toPersist.stream()
    .flatMap(envelope -> annotationsPersistable(envelope).stream())
    .collect(Collectors.toList());

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

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

有人知道反正要从API调用动态获取scss变量并设置全局变量值吗？我相信可以运行一个打字稿功能来用我想要的覆盖每个页面的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

动态设置scss变量角离子

1 个答案: