CSS里的rgba()函数中无法使用var()函数

[饭.]

最近在使用CSS的var()函数遇到一个问题，比如我在JS中设置了一个自定义属性--color，在CSS中用var()来调用它，然后将该属性值设置成背景色，此时是正常的显示效果。


但是如果把它和rgba()一起使用就会失效，无法显示背景半透明效果。


是因为CSS中函数不能嵌套函数吗？这个问题要如何解决才能实现背景半透明效果呢？十分感谢！！！

[qq_34670812]

rgba格式是什么,你这字符串放进去能用??

[Stephen_112]

不为什么不定义俩个样式来回切换呢，不香吗？

[ZionHH]

用的sass是吧

.demo {
  $bgc: red;
  background-color: rgba($bgc, .5);
}

[饭.]

引用 3 楼 ZionHH 的回复:

用的sass是吧

.demo {
  $bgc: red;
  background-color: rgba($bgc, .5);
}

对，但我想要在js里面控制颜色变量（因为颜色是子组件props传过来的，这里省略了），而不是直接在sass中修改那个$变量。不过先谢谢了，已经解决了！

[穿靴子的咪咕酱]

楼主怎么解决的，我也遇到了同样的问题，可以贴下解决代码吗？

[饭.]

引用 5 楼 穿靴子的咪咕酱 的回复:

楼主怎么解决的，我也遇到了同样的问题，可以贴下解决代码吗？

因为rgba()是CSS里面的一个方法，其中参数$color的值无论填的是字符串/HEX值/RGB值，最终都会转换成RGB值，所以需要转换，写一个转换的函数就可以了。

[穿靴子的咪咕酱]

引用 6 楼 饭. 的回复:

[quote=引用 5 楼 穿靴子的咪咕酱 的回复:]楼主怎么解决的，我也遇到了同样的问题，可以贴下解决代码吗？

因为rgba()是CSS里面的一个方法，其中参数$color的值无论填的是字符串/HEX值/RGB值，最终都会转换成RGB值，所以需要转换，写一个转换的函数就可以了。 [/quote] 感谢大佬！！