如何以编程方式在Ionic的variables.scss中设置变量？ [英] How to programmatically set variables in Ionic's variables.scss?

问题描述

Ionic附带一个variables.scss文件，你可以在那里设置不同的样式变量，如原色等。

Ionic comes with a variables.scss file, and in there you can set up different style variables such as primary colours, etc.

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

Is there a way I can programmatically change variables inside of here?

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

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

For example: changing the primary color to the result of a color picker

推荐答案

所以我很好奇并且四处看看我能否找到解决方案，所以这就是我所得到的：

So i got curious and was looking around to see if i was able to find a solution, so here's what i got:

您无法更改SASS变量，因为它已编译并变为css，因此您使用属性的任何标记 color =您的颜色名称将在构建过程中进行预处理，并转换为大量的背景颜色和其他内容。

You can't change the SASS variable since it's compiled and turned into css, so any tag you use an attribute color="your Color Name" will be pre-processed in the build process and turned into lots of background-color and other stuff.

所以我开始寻找使用 css带有SASS变量的变量，类似于

So i started to look for using css variables with the SASS variable, something like

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

但是无法实现我想要的，或者我不知道该怎么做正常。使用变量也许你可以在我的下一个想法中做些什么，但是更简单。

But wasn't able to achieve what i wanted, or i don't know how to do it properly. With a variable maybe you could do what's in my next idea, but in a easier way.

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

So i thought "maybe there's a workaround" and something came to my mind:

• 您可以创建一个类，我们称之为 .dynamic-bg-color 。


• 最初将其设置为您想要的颜色，假设 .dynamic-bg-color：{bakcground-color：＃333} 。


• 将该类提供给您想要更改的任何组件，例如< ion-item> 或< ion-toolbar> 或< button> 。


• 将此颜色保存为字符串在某个地方，比如localStorage，NativeStorage等（ this.storage.set（'dynamic'，'＃333'））;



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

• You could create a class, let's call it .dynamic-bg-color.
• Initially set it to a color you want, let's say .dynamic-bg-color: { bakcground-color: #333}.
• Give that class to any component you want to change, like <ion-item> or <ion-toolbar> or <button>.
• Save this color as a string in somewhere, like a localStorage, NativeStorage, etc. (this.storage.set('dynamic', '#333'));

• When the user pick a new color, you'll override the old color in the storage and change color for your class:

public updateColor =（pickedColor）=> {
const color：string = pickedColor; //我假设拣货员回归它像'＃333333'
让myTags = document.getElementsByClassName（'dynamic-bg-color'）;
for（i = 0; i< myTags.length; i ++）{
myTags [i] .style.backgroundColor = color;
//更新任何你想要
}
}

可能每次进入新页面时都需要更新，因为它会生成带有该类的更新标签，所以在ionViewWillEnter上放一个代码，这样每次他继续或返回该页面时都会更新颜色。

Probably you'll need to update everytime you enter a new page, since it'll generate newer tags with that class, so put a code on ionViewWillEnter so everytime he goes on or back to that page it updated the color.

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

Haven't tried this, but it's worth a shot. If you try this let me know if it worked.

希望这会有所帮助：D

Hope this helps :D

这篇关于如何以编程方式在Ionic的variables.scss中设置变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！