获取CSS变量的真实值

Question

当您将CSSvar()变量分配给Sass变量时，如下所示：

--color: #FFF;
$color: var(--color);

这将导致$color将var(--color)保持为一个值。有没有办法让它保持实际的CSS#FFF值？那么$color会保存#FFF而不是var(--color)？

这将非常好，这样您就可以在更复杂的函数和不允许使用var((的媒体查询中使用css变量。

Answer 1

不可能直接使用，但另一种选择是保留rgb或hsl值，而不是十六进制值。

--color: 129, 19, 29;
$color: rgb(var(--color));

您可以为每个变量指定2个变量，如下所示，以使这两个选项都可用。

--color: #554784;
--color-rgb: 129, 19, 29;

或者总是使用rgb(a(表示法

color: rgb(var(--color));