Search code examples
csscss-variables

CSS: Using hsl variable in hsla?

Say I have a CSS variable for an hsl defined as such:

--white-1: hsl(0deg 0% 100%);

Now, I want to use that same white, but at 50% opacity. So, something like this:

--white-2: hsla(0deg 0% 100% 50%);

Is there a way to use the first variable --white-1 in the definition of the variable --white-2? I guess I want to do something like this:

--white-2: hsla(var(--white-1) 50%);

Is there a way to achieve this in CSS?

Solution

  • In the near future yes:

    :root {
    --white-1: hsl(0deg 0% 100%);
    --white-2: hsl(from var(--white-1) h s l / 50%);  
}