在 sass 函数中使用 css 变量 - node-sass [英] Using css variables in sass functions - node-sass

问题描述

我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(lighten()/darken() 准确地说)，就我而言知道，最新版本的 LibSass 允许它.

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.

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

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

参数 $color of lighten($color, $amount) 必须是一种颜色

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

我错过了什么吗?
谢谢！

Am I missing something?
Thanks!

推荐答案

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

Unfortunately you can't... lighten is a SASS function at compile-time, while CSS variables are run-time variables.

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

You can make a SASS variable into a CSS variable, but not the other way round.

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

To conclude, if you need to call SASS functions, just use SASS variables (as arguments to those functions).

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

预期的输出是不可能的，因为 rgba(color, alpha) 是一个 Sass 函数.
color 参数必须是 Sass Color 类型.
Sass 不评估 css 自定义属性值，因为这些是运行时变量.

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.

这篇关于在 sass 函数中使用 css 变量 - node-sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！