css Question posted in
Some basic documentation can be found here.

how to use css variables to contain color-mix used with another variable

I have in css (generated by sass) variable called --secondary and it’s value is red(#f00)
I want to create more variables for opacity like --secondary-100, --secondary-90, …
I used color-mix in oklab, so this is the code:

setTimeout(_ => {
  document.querySelector('div').style.cssText += `--secondary:#f00;`
},100)
div { 
  width:100px;
  height:100px;

  --secondary-100: color-mix(in oklab, var(--secondary) 100%, transparent 0%);
  background-color: var(--secondary-100);
}
<div></div>

as you can see the div is transparent not red
( if you see it red that mean i didn’t recreate the problem the problem stile exist in the real firefox site )
i tried it in firefox and this is the result
enter image description here
enter image description here

in devtools i just wrote the same thing contains in the variable --secondary-100 out of it
and it suddenly works idk where is the problem or is it a well known problem and I’m living under my rock

btw this variables and colors is user choice and not static so i can’t just write them my self and the best i can do is to use javascript to deal with those colors and save them directly without using color-mix

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    it just worked when i replaced the :root with * idk why or how but in chrome devtools it appears that the variable declearied in the :root wasn't declearied in the children


  2. 0

    You have to specify the method parameter. It is the first parameter.

    div {
  width: 100px;
  height: 100px;
  --secondary: #f00;
  --secondary-100: color-mix(in srgb, var(--secondary) 100%, transparent 0%);
  background-color: var(--secondary-100);
}
    <div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search