在我的CSS中，我有几个颜色变量，例如：
$bkg-color: #ffffff
白色是我想要的默认颜色，但是$ bkg-color也可以根据用户创建和保存的内容自定义为其他颜色。所以在我的打字稿中，我有：
backgroundColor?: string = '';
我的获取呼叫响应数据设置为pageDetails，然后检查
if(pageDetails.backgroundColor) {
this.backgroundColor = pageDetails.backgroundColor;
}
我无法将背景色类直接绑定到html，因为我的页面内容是通过v-html='displayedHtml'显示的
如何设置$bkg-color: this.backgroundColor（如果存在||设置默认的白色）。
我正在使用vue和打字稿
我相信我可以像这样设置默认值：$bkg-color: #ffffff !default;，但是如何根据我的数据分配默认值却让我有些困惑。
答案 0 :(得分：1)
How can i set $bkg-color: this.backgroundColor (if exists || set default color of white).
不幸的是，Scss变量在运行时不存在，它们仅在编译时存在，然后由python编写的编译器用css样式表中的值替换它们。如果您不支持Internet Explorer，则可以使用css variables解决此问题，该问题可以在运行时动态更改。
如果我误解了这个问题，请告诉我，我将进行编辑。
编辑： https://jsfiddle.net/njsrLywt/这是一个演示，演示了在运行时更改CSS变量的情况。
EDIT2：您也将不再能够使用lighten / darken，但是可以使用运行时存在的javascript实现lighten / darken。另外请注意，您应该避免使用浅色/暗色，而使用scale-color，因为它可以缩放100％的剩余百分比，从而可以更好地缩放颜色
EDIT3：这是使用javascript 100％完全不可变FP样式实现的比例尺颜色的快速实现，请按以下方式使用
ColorUtils.scaleColor("#294e80", -35); //darken 35%
ColorUtils.scaleColor("#F6F6F6", 35); // lighten 35%