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

时间:2017-07-05 11:10:13

标签: css atom-editor css-variables

我正在尝试CSS变量,我想使用RGB颜色。

这是我当前的CSS变量:

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

因此,使用以下代码时,这非常正常:

color: var(--primary)

但有些段落也使用这种原色,我想给它们一点点透明度。现在我可以替换它并创建另一个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));

这可以按照我想要的方式工作,我个人认为这是一种更好的方法,但我的颜色不能在我的代码编辑器中预览,请参阅图像。

enter image description here

查看--dark变量,它不会使用此代码显示颜色。

理想情况下,我想使用:

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

并输出如下:

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

但它不起作用?

1 个答案:

答案 0 :(得分:1)

假设您正在使用atom-pigment。颜色检测也在评论中起作用。因此,您可以在评论中添加实际的rgb值,仅供参考&像往常一样使用变量。像这样:

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