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

Question

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

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

Does this answer your question? How to create color shades using CSS variables similar to darken() of Sass? — DarkBee
– DarkBee, Commented Jun 4, 2024 at 6:21
no i doesn't because the javascript changes the colors so i just use normal css variables not compiled with sass — Fire Gamer
– Fire Gamer, Commented Jun 4, 2024 at 7:01
The top answer is a CSS-only solution. Unsure where you're seeing SASS ? — DarkBee
– DarkBee, Commented Jun 4, 2024 at 7:09
no the same problem it works if i right it as a value to the background property directly but if it's inside another variable it doesn't work for some reason but good suggestion — Fire Gamer
– Fire Gamer, Commented Jun 4, 2024 at 7:20
it was new to me as if it's a magic so i assumed it was something to do with sass — Fire Gamer
– Fire Gamer, Commented Jun 4, 2024 at 7:20

mahan · Accepted Answer · 2024-06-04 06:15:19Z

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>

answered Jun 4, 2024 at 6:15

mahan

15.4k9 gold badges69 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fire Gamer Over a year ago

i just forget it in this code example but i didn't work

Jeremy Caney · Accepted Answer · 2024-06-05 00:41:41Z

0

It just worked when I replaced the :root with *. I don’t know why or how, but in Chrome dev tools, it appears that the variable declared in the :root wasn't declared in the children.

edited Jun 5, 2024 at 0:41

Jeremy Caney

7,808115 gold badges58 silver badges86 bronze badges

answered Jun 4, 2024 at 8:11

Fire Gamer

637 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related