Why can't I use rgba in CSS Variable?

Question

I'm trying to create this variable in SCSS file. But that doesn't work. Where am I doing wrong?

--orange: #fda63c;
--orange-light: rgba(var(--orange), 0.15);

Doesn't works this also:

--orange: #fda63c;
background-color: rgba(var(--orange), 0.15);

Answer 1

You won't be able to pass a function into rgba, but rgba will accept a variable containing the rgb value of a color.

:root {
--orange: 253, 166, 60;
--orange-light: rgba(var(--orange), 0.15);  
}


p {
  color: var(--orange-light);
}

<p>Hello orange world</p>

jsFiddle