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

Ionic自带一个variables.scss文件，在那里可以设置不同的样式变量，如原色等。如何以编程方式在Ionic的variables.scss中设置变量？

有没有一种方法可以通过编程方式更改这里面的变量？

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

例如：改变原色颜色选择器

来源

2017-07-14 Kevin Shi

你想改变它像永远，或者当用户关闭应用程序，回来你设置回原来的？ –

@GabrielBarreto永远是可取的，但或者是好的。 –

，所以我就好奇，环顾四周，看看我能找到一个解决方案的结果，所以这里就是我的了：

你不能改变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上放置一个代码，以便每次进入或返回该页面时都会更新颜色。

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

希望这有助于：d

来源

2017-07-15 01:04:35

嗨，我摆弄你的方法相当数量，它的作品！我遇到了一个奇怪的错误（或功能），我最初尝试使用.css文件以及组件的styleUrls数组，Ionic无法加载资源。这正是这篇文章中描述的[链接]（https://github.com/angular/angular-cli/issues/1501），但是修复无效。然后我把它改成了.scss，它工作正常。感谢您的帮助！ –

另一个说明：我无法使用'myTags [i] .style'（打字稿错误出于某种原因）访问样式，而不得不使用'myTags [i] .setAttribute（“style”，“... “）' –

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

回答

相关问题