混合中的CSS函数 - 灰度

Question

我正在尝试创建一个用于对html元素进行灰度缩放的mixin。

在CSS方式中，它应该是：

filter: grayscale(50%);

我的混音 ：

@mixin grayscale_element($value) {
    -webkit-filter: grayscale($value);
    -moz-filter: grayscale($value);
    filter: grayscale($value);
}

我的错误 ：

Fatal error: Uncaught exception 'SassScriptFunctionException' with message 'SassNumber must be a SassColour
Source: -webkit-filter: grayscale($value)'

问题是，在sass中灰度已经是一个函数，而参数应该是一种颜色。

模块：sass：：脚本：：函数 - sass文档

如何在混合中使用这些过滤器？

注意：我正在使用phpsass。

Answer 1

如果您只想避免将grayscale函数评估为 Sass 函数，请使用字符串插值。像这样：

filter: #{"grayscale(#{$value})"};

如果$value设置为 50%，则 CSS 输出将为：

filter: grayscale(50%);

演示

Answer 2

只要我包含 mixin，代码对我来说就可以正常工作，例如：

@include grayscale_element(100%);

当一个字符串被传递给mixin时，它失败了，正如你提到的。

$val: 100%;
@include grayscale_element(#{$val});

应估计类型。