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

Question

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

有没有一种方法可以在这里以编程方式更改变量？

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

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

Answer 1

所以我很好奇，四处寻找是否能找到解决方案，所以我得到了：

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

所以我开始寻找将 css variables 与 SASS 变量一起使用，类似于

: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