在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上），但是却收到错误

  

$ color of lighten（$ color，$ amount）的参数必须是颜色

我想念什么吗？
谢谢！

Answer 1

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

您可以将SASS变量转换为CSS变量，但反之则不行。

最后，如果需要调用SASS函数，只需使用SASS变量（作为这些函数的参数）。

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

  

由于rgba（color，alpha）是Sass函数，因此无法实现预期的输出。
  color参数必须是Sass Color类型。
  Sass不会评估CSS定制属性值，因为它们是运行时变量。

Answer 2

如何使用SASS变量而不是CSS变量。 如果定义了SASS变量$ color，则在sass lighten函数中使用它可以解决此错误。

Answer 3

Sass不允许我们仅使用sass变量来使用css变量，并将其传递给lighten函数，因为您知道sass编译器会自动将其转换为css并自动进行管理。我认为这可以解决您的问题$ color或sass的任何变量，并在lighten（）函数中使用它。