sass 使用rgba(var --color)没有效果的问题?

Question

sass.js

// 主题颜色
$themeColor: var(--color_theme, #409EFF);
$table_th: rgba($themeColor, 0.8);

然后页面上元素是透明的

Answer 1

你想下下面两个问题
一、rgba($themeColor, 0.8)这个,最终编译成的css代码是啥?
是不是最终会编译成rgba(var(--color_theme, #409EFF), 0.8)?
二、基于上面的答案,rgba(var(--color_theme, #409EFF), 0.8)里的var(--color_theme, #409EFF)得到的最终是啥?
最终会得到一个#409EFF这样的16进制颜色值,rgba在css里面你得传10进制的颜色值,然而现在得到的是#409EFF这样的16进制颜色值,你觉得你代码会生效吗?

Answer 2

SASS 当中写 rgba(#FFFFFF, 0.8) 是没问题的，因为最终会编译成 rgba(255,255,255,0.8)。
但是在 CSS 中 rgba(#FFFFFF, 0.8) 是不合规的，需要你转换成对应的RGB色值。

你在上面提到的

$themeColor: var(--color_theme, #409EFF);
$table_th: rgba($themeColor, 0.8);

其实 $table_th 这个 SASS变量 最终编译成的是
rgba(var(--color_theme, #409EFF), 0.8)
这在CSS中是没办法识别的。