Why can't I use rgba in CSS Variable? [duplicate]

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);

rgba() expect rgba format value like rgba(01,02,03, 0.15) but you stored in your variable hexa format (#fda63c). This can be an issue here. — Hanif
– Hanif, Commented Jan 25, 2020 at 5:56

Andy Hoffman · Accepted Answer · 2020-01-25 06:07:44Z

22

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

answered Jan 25, 2020 at 6:07

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

devstefancho Over a year ago

I use a variable with rgb(253, 166, 60) and it doesn't work, as your answer, I need to make a variable containing only rgb numbers, I felt I'm blind because I didn't notice your answer omit rgb in the variable. Thanks

Maximus Nerdous Over a year ago

@stefancho Use the number group without the rgb function 253, 166, 60. I don't understand how the comma separated numbers translate/work, but they do.

Collectives™ on Stack Overflow

Why can't I use rgba in CSS Variable? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related