获取 CSS 变量的真实值

Question

当您将 CSS var() 变量分配给 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));