I have a CSS var that is defined in the root as a HEX, this is unchangeable.
--blue: ##0000FF
I'd like to use this variable to create an opacity, like this:
color: rgba(var(--blue), 0.1)
This won't work as --blue
is a HEX so I use a function like this to convert it:
@function hex-to-rgb($hex) {
@return red($hex), green($hex), blue($hex)
}
and I then try:
color: rgba(hex-to-rgb(var(--blue)), 0.1)
However I'm getting the error $color: var(--blue) is not a color
I'm also trying transparentize and other solutions but I keep on getting that the blue variable isn't a colour...
Is there a way of making this work?