问题
I am trying to use CSS variables in an Angular project together with Sass functions (lighten() / darken() to be precise), and as far as I know, the latest version of LibSass allows it.
I have installed node-sass@4.11.0 and sass-loader@7.1.0 (and on Angular v7.3.0), but yet I receive an error
Argument $color of lighten($color, $amount) must be a color
Am I missing something?
Thanks!
回答1:
Unfortunately you can't... lighten is a SASS function at compile-time, while CSS variables are run-time variables.
You can make a SASS variable into a CSS variable, but not the other way round.
To conclude, if you need to call SASS functions, just use SASS variables (as arguments to those functions).
More explanations from the maintainer of 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.
回答2:
How about using SASS variable instead of css variable. If you define SASS variable $color then use it in your sass lighten function should fix this error.
回答3:
Sass doesnt allows us to use css variables simply use the sass variable and pass it on lighten function as u know the sass compiler will automatically converts it to the css and manages automatically. I think this will solve your problem $color or any variable to your sass and use it inside the lighten() function.
来源：https://stackoverflow.com/questions/55823860/using-css-variables-in-sass-functions-node-sass