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: { bakcground-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上放置一个代码，以便每当他继续或返回该页面时它都会更新颜色。 / p>

没试过，但值得一试。如果您尝试这个，请告诉我它是否有用。

希望这会有所帮助：D

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

1 个答案: