在css变量中设置rgba上的不透明度/ alpha

Question

我尝试了CSS变量，我想使用RGB颜色。

这里是我的CSS的变量：

color: var(--primary) 

但有些段落也使用这种原色，我想给他们：

--primary: rgb(112, 199, 255); 

因此，使用下面的代码时，这工作绝对没问题略微透明。现在，我可以更换，然后再创建CSS变量，像这样：

--primary: rgb(112, 199, 255);  
--primary-alpha: rgba(112, 199, 255, 0.7); 

但这只是感觉混乱和困惑有两种原色和什么如果我使用了几个不同的透明度。我还可以使用下面的CSS变量：

--primary: 112, 199, 255; 
--alpha: 0.7; 

和输出使用下面的代码是：

color: rgba(var(--white), var(--alpha)); 

这个工程，我想，我个人认为是这样做，但我的颜色的更好的方式不要在我的代码编辑器中预览图片。

看那--dark变量，它不会显示使用此代码的颜色。

理想情况下，我想用：

--primary: rgb(112, 199, 255); 

和输出它像这样：

color: var(--white), var(--alpha); 

但它不会工作？

Answer 1

假设您正在使用atom-pigment。颜色检测也在评论中起作用。所以你也许可以在注释中添加实际的rgb值，仅供参考&照常使用该变量。像这样：

--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */