5

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
  • 23,073
  • 13
  • 57
  • 69
  • 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

20

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
  • 18,436
  • 4
  • 42
  • 61
  • 2
    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 – devstefancho 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