如何使用 css 变量来包含与另一个变量一起使用的混合颜色

我在 css（由 sass 生成）中创建了名为 --secondary 的变量，其值为 red(#f00)

我想为不透明度创建更多变量，如 --secondary-100 和 --secondary-90 。 我想为不透明度创建更多变量，如 --secondary-100 , --secondary-90 , ...
我在 oklab 中使用了 color-mix ，代码如下：

div {
  width:100px；
  height:100px；

  --secondary：#f00;
  --secondary-100：颜色混合（oklab 中，var(--secondary) 100%, transparent 0%)
  background: var(--secondary-100)；
}

<div></div>

您可以看到 div 是透明的，而不是红色的 我在 Firefox 中进行了尝试，结果如下

在 devtools 中，我写了同样的内容，其中包含变量 --secondary-100 。 我不知道问题出在哪里，还是这是个众所周知的问题，而我生活在自己的岩石之下

总之，这些变量和颜色是用户选择的，并不是静态的，因此我不能自己编写它们，我所能做的最好的办法就是使用 javascript 来处理这些颜色，并直接保存它们，而无需使用 color-mix

该问题的原因是 color-mix 函数无法识别 red() 函数的输出。 red() 函数返回一个 RGB 颜色值，而 color-mix 函数需要一个命名颜色或十六进制颜色代码作为输入。

解决此问题的最佳方法是直接使用 rgba() 函数来创建具有不同不透明度的颜色。可以使用 Sass 的颜色函数来提取原始颜色的红色、绿色和蓝色通道值，并使用这些值来创建具有所需不透明度的 rgba() 颜色。

以下是更新后的 Sass 代码：

div {
  width: 100px;
  height: 100px;

  --secondary: #f00;
  --secondary-r: red(var(--secondary));
  --secondary-g: green(var(--secondary));
  --secondary-b: blue(var(--secondary));

  --secondary-100: rgba(var(--secondary-r), var(--secondary-g), var(--secondary-b), 1);
  --secondary-90: rgba(var(--secondary-r), var(--secondary-g), var(--secondary-b), 0.9);

  background: var(--secondary-100);
}

这段代码将创建一个名为 --secondary-100 的变量，该变量将包含不透明度为 1（100%）的红色，以及一个名为 --secondary-90 的变量，该变量将包含不透明度为 0.9（90%）的红色。可以根据需要创建更多具有不同不透明度的变量。

注意：

• 由于 --secondary 变量已经是一个十六进制颜色代码（ #f00 ），因此可以直接使用它来创建具有不同不透明度的 rgba() 颜色。
• 此解决方案不需要使用 color-mix 函数。

希望这可以帮助解决问题！