We’re currently redoing most of our stylesheets for our design system, going from the older @import way of working to the new, modular @forward and @use way.
Because we are redoing the entire structure behind our code, we’ve also decided it’s time to look into changing many things from sass variables over to css variables.
We want to work a lot more with css variables and utilize them for many of the variants we have for our components (like buttons, tags, badges, notifications, etc…).

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