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

Question

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

:root {
  --color: #ff00ff;
}

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

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

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

Answer 1

更新:

我刚刚读到 Sass 3.5.0 现在应该支持带有原生 CSS 函数的 CSS 自定义属性。我用 node-sass 试过了，但是 libsass 还不支持 Ruby Sass 3.5 的这个特性

---

对于 native CSS 函数，我认为 sass 用它自己的实现替换了它们，因为我必须在 Sass 中使用字符串插值来编译我的 css:

--初级:#{"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));
}

然后通过使用 calc 计算原始亮度的百分比，事件、悬停、重音等的阴影可以使用更改的亮度:

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

这也可以用另一种方式来减轻，但这并不适用于所有情况。它也很困惑，最终会在变量范围内造成一些污染。