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

Posted 2023-02-21

【中文标题】在 sass 函数中使用 css 变量 - node-sass

【英文标题】：Using css variables in sass functions - node-sass

【发布时间】：2019-09-13 09:14:54

【问题描述】：

我正在尝试在 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) 必须是一种颜色

我错过了什么吗？ 谢谢！

【问题讨论】：

你有没有在某处声明$color的颜色？

能否提供导致错误的代码？

lighten 是 sass 的原生函数，$color 只是第一个参数名称。代码为：color: lighten(var(--textColor), 10%)

显然 Sass 无法处理 CSS 变量；但是使用 Sass 变量有什么问题呢？

基本上编译后你不能使用sass函数，我相信你的要求是你从Angular改变颜色。你最好的选择是使用 CSS 变量，查看下面的文章你可以得到一些提示。 medium.com/@amcdnl/…

【参考方案1】：

很遗憾，您不能...lighten 在编译时是一个 SASS 函数，而 CSS 变量是运行时变量。

你可以把一个 SASS 变量变成一个 CSS 变量，但反过来不行。

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

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

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

【讨论】：

github.com/sass/libsass/issues/2561 我猜有些已经实现了

@DanR。即使 SASS 维护人员可以正确实现它，它也只能与 rgb()、rgba()、hsl() 和 hsla() 等 CSS 函数一起使用，但不能与 lighten() 或 darken() 等任何其他 SASS 函数一起使用。

【参考方案2】：

如何使用 SASS 变量而不是 css 变量。 如果你定义了 SASS 变量 $color 然后在你的 sass lighten 函数中使用它应该可以修复这个错误。

【讨论】：

确实，但问题是关于在 Sass 中使用 CSS 变量

我知道，但这不是我的目的。 CSS vars 更加一致，并且可以在 JS 中进行操作，这与 SCSS 汽车不同。

【参考方案3】：

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