2

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);
doğukan
  • 17,415
  • 8
  • 39
  • 59
  • 1
    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 Jan 25 '20 at 05:56

1 Answers1

13

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

Andy Hoffman
  • 17,102
  • 4
  • 37
  • 55
  • 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 – stefancho Mar 13 '22 at 01:45
  • @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. – Maximus Nerdous Apr 09 '22 at 13:48