sass - 在 sass 函数中使用 css 变量 - node-sass

Question

我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(准确地说是 lighten()/darken())，据我所知，最新版本的 LibSass 允许这样做。

我已安装 node-sass@4.11.0和 sass-loader@7.1.0 (在 Angular v7.3.0 上)，但我收到一个错误

Argument $color of lighten($color, $amount) must be a color

我错过了什么吗？
谢谢!

Answer 1

不幸的是，您不能... lighten是编译时的 SASS 函数，而 CSS 变量是运行时变量。

您可以将 SASS 变量转换为 CSS 变量，但不能反过来。

总而言之，如果您需要调用 SASS 函数，只需使用 SASS 变量(作为这些函数的参数)。

来自 node-sass 维护者的更多解释:
https://github.com/sass/node-sass/issues/2251#issuecomment-372009293

The expected output is impossible because rgba(color, alpha) is a Sass function.
The color argument must be a Sass Color type.
Sass does not evaluation css custom property values, because these are run-time variables.