如何在 Ionic 的 variables.scss 中以编程方式设置变量？

Question

Ionic 带有一个 variables.scss 文件，您可以在其中设置不同的样式变量，例如原色等。

有没有办法以编程方式更改此处的变量？

$colors: (
  primary: #ffbb00,
  secondary: #32db64,
  danger: #f53d3d
);

例如：将原色更改为颜色选择器的结果

Answer 1

所以我很好奇并环顾四周，看看我是否能够找到解决方案，所以我得到了：

您无法更改 SASS 变量，因为它已编译并转换为 css，因此您使用属性color="your Color Name"任何标记都将在构建过程中进行预处理并转换为大量background-color和其他内容.

所以我开始寻找在 SASS 变量中使用css变量，比如

:root {
  --modified-color: #333;
}
/*Declaring it here \/ or inside :root */
$colors: (
  primary: --modified-color,
  secondary: #32db64,
  danger: #f53d3d
);

但无法实现我想要的，或者我不知道如何正确地做到这一点。 使用变量也许你可以做我的下一个想法，但以更简单的方式。

所以我想“也许有一个解决方法”，我想到了一些东西：

• 你可以创建一个类，我们称之为.dynamic-bg-color 。
• 最初将其设置为您想要的颜色，比方说.dynamic-bg-color: { background-color: #333} 。
• 将该类赋予您想要更改的任何组件，例如<ion-item>或<ion-toolbar>或<button> 。
• 将此颜色保存为某个地方的字符串，例如 localStorage、NativeStorage 等（ this.storage.set('dynamic', '#333') ）；

• 当用户选择一种新颜色时，您将覆盖存储中的旧颜色并为您的类更改颜色：

  public updateColor = (pickedColor) => { const color: string = pickedColor; // I'M ASSUMING THE PICKER RETURNS IT AS A STRING LIKE '#333333' let myTags = document.getElementsByClassName('dynamic-bg-color'); for(i=0; i < myTags.length; i++) { myTags [i].style.backgroundColor = color; // UPDATE ANYTHING ELSE YOU WANT } }

可能您每次进入新页面时都需要更新，因为它会使用该类生成更新的标签，因此在 ionViewWillEnter 上放置一个代码，以便他或她每次进入或返回该页面时都会更新颜色。

没试过这个，但值得一试。 如果你尝试这个让我知道它是否有效。

希望这会有所帮助：D