使用CSS变量作为Sass函数参数

猿西门Tom2020-03-24

有没有办法将CSS变量与Sass函数一起使用，例如lighten？像这样：

:root {
  --color: #ff00ff;
}

.div {
  background-color: lighten(var(--color), 32%);
}

我收到一条错误消息，“论证$color的lighten($color, $amount)必须是一种颜色”。

我正在使用CSS（而不是Sass）变量，因为我需要在js中使用它们。

村村2020/03/24 18:15:11

更新：

我刚刚读到Sass 3.5.0现在应该支持带有本机CSS函数的CSS自定义属性。我尝试使用node-sass进行此操作，但到目前为止libsass不支持Ruby Sass 3.5的此功能。

对于本机CSS函数，我认为sass将其替换为自己的实现，因为我不得不在Sass中使用字符串插值来使css进行编译：

--Primary: #{"hsl(var(--P-h), var(--P-s), var(--P-l))"};

对于Sass函数，我想出纯CSS来实现亮度的最接近的功能（显然不适用于IE）是将颜色值分为色相，饱和度和亮度，以便在hsl（）中使用。这也可以与rgba（）一起使用，但是hsl（）可以更轻松地控制应用程序主题的阴影：

:root {
    --P-h: 203;
    --P-s: 82%;
    --P-l: 41%;
    --Primary: hsl(var(--P-h), var(--P-s), var(--P-l));
}

然后，对于活性，悬停的色调，重音等可以使用改变的亮度，通过使用计算值来计算原始亮度的百分比：

:root {
    --Primary-20: hsl(var(--P-h), var(--P-s), calc(var(--P-l) * 0.8));
}

这也可以减轻重量，但这并不适用于所有情况。这也很混乱，最终导致可变范围内的污染。

Newest Answer