为CSS变量分配颜色值

Question

在我的CSS中，我有几个颜色变量，例如：

$bkg-color: #ffffff

白色是我想要的默认颜色，但是$ bkg彩色也可以根据用户创建和保存的内容来定制为其他颜色。所以在我的打字稿中，我有：

backgroundColor?: string = '';

我的Get通话响应数据设置为pageTails，然后我检查

if(pageDetails.backgroundColor) { 
this.backgroundColor = pageDetails.backgroundColor; 
}

我无法将背景颜色类直接绑定到HTML，因为我的页面内容是通过v-html='displayedHtml'

显示的

如何设置$bkg-color: this.backgroundColor(如果存在||设置默认颜色的白色(。

我正在使用vue和typescript

我相信我可以这样设置默认值：$bkg-color: #ffffff !default;，但是如何根据数据进行分配是我有点丢失的地方。

Answer 1

How can i set $bkg-color: this.backgroundColor (if exists || set default color of white).

不幸的是，SCSS变量在运行时不存在，它们仅在编译时存在，然后Python写的编译器在CSS样式表中代替了它们的价值。如果您不支持Internet Explorer，则可以使用css variables来解决此问题，该问题可以在运行时进行动态更改。

如果iv'e误解了这个问题，请告诉我，我会添加一个编辑。

编辑：https://jsfiddle.net/njsrlywt/这是一个演示，显示在运行时更改CSS变量。

edit2：您也将不再使用亮/变暗，但是您可以使用在运行时存在的JavaScript实现的Lighten/Darken的实现。另外，还应避免使用浅色/变暗来支持比例色，这可以更好地缩放颜色缩放，因为它会缩放100

的剩余％

edit3：这是用JavaScript 100％完全不可变的FP样式实现的比例色的快速插入

ColorUtils.scaleColor("#294e80", -35);  //darken 35%
ColorUtils.scaleColor("#F6F6F6", 35); // lighten 35%

Xpc1bvjinglkemgxghwf4dbjc1hyfsokleabekjxmgwaeifiw8rdqaakiaakiaaidkaai0bukdsifuafnvgwja8qmbizcgutdab7iaaa