CSS 里颜色变量使用透明值的问题

[MajestySolor]

:root {
  --color-main: rgb(236, 65, 65);
}

.text {
  color: var(--color-main);
}

这是最基本的变量使用，但是这里有个问题，那就是如果我想使用不同的透明度就必须定义同一个颜色不同透明度的变量，非常不方便，然后在 stackoverflow 上看到了另一种更灵活的写法

:root {
  --color-main: 236, 65, 65;
}

.text {
  color: rgba(var(--color-main), 0.8);
}

看上去很完美，然而在我实际使用中发现 --color-main: 236, 65, 65 这样的写法在编辑器里是无法显示颜色拾取器的，比如我用的 VSCode 就不行

想问问各位大佬有么有更方便更灵活的办法

[VDimos]

这个特性还没用过，感觉用了 less 回不去了

[noe132]

明显 css variable 是 runtime 才能确定的值。而且遵循层叠规则，更高优先级的覆盖低优先级。