whats wrong with this. background-color: rgba(var(--label-blue), 0.2);
i saw this type of code in stackoverflow and thought it was a best idea to implement it in my project but for someone reason its not working.
browser support is limited or did i made mistake somewhere ?
13 Replies
show the variable declaration as well. i have a suspicion
--label-blue: #1d7afc;
thats not rgb
--label-blue: 138 43 226; or what notso i need to convert it into rgb before using it? 🤔
actually the value for that hex is
29 122 252 give it a trytho, my suspicion were the missing commas between each value.
had it error out on me a couple of times. (using sass via npm)
yeah it worked now. previously i tried with --label-blue: #1d7afc; and --label-blue: rgb(29, 122, 252); it didnt work. now that i removed rgb from label-blue: rgb(29, 122, 252) it worked 
👍
you don't need commas though? I mean you can't have commas if you use rgba(29 122 252 / 0.2) for instance 😄
ooo but you do if you use
, 0.2 right right. rgba(29 122 252) is valid without too because no alpha..i know...
i used hsl in these cases but that shouldn't matter. i started using the commas afterwards and just got used to it. (that was over 1.5 years ago tho, things might have changed, but i don't use the comma-free syntax any longer)
I could be wrong, but I think all the new color functions only work with space-separated values and not with commas, which is why the space syntax was added to rgb and hsl, so they're all in line.
so if you want to use lch or lab, etc (and if you like hsl, you'll like lch even more I think), you'll have to go back 😄
Though browser support is a thing, so it might be awhile
could be that i mixed up "/" and "," for the alpha and that was the issue cant remember honestly, lol
all i remember that adding the commas between h, s, l fixed it