Setting opacity / alpha on rgba in css variable

Question

I am trying out CSS variables and I would like to use RGB colours.

Here's my current CSS Variable:

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

So this works absolutely fine when using the following code:

color: var(--primary)

But some paragraphs also use this primary colour and I would like to give them a slight transparency. Now I could replace that and create another CSS Variable like so:

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

But that just feels messy and confusing having two primary colours and what If I use a few different transparencies. I could also use the following CSS Variable:

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

and output it using the following code:

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

This works as I want and I personally think is a nicer way of doing it but my colours don't preview in my code editor see image.

Look at the --dark variable, it won't show the colour using this code.

Ideally, I would like to use:

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

and output it like so:

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

But it won't work?

Answer 1

Assuming you're using atom-pigment. The color detection works within comments as well. So you could perhaps add the actual rgb value in the comments only for reference & use the variable as usual. Like so:

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