CSS函数在mixin - 灰度级

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 :: Script :: Functions - Sass文档

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

注意:我正在使用phpsass.

Answer 1

如果您只是想避免将grayscale被评估的函数作为Sass函数使用字符串插值.像这样的东西:

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

如果$value设置为50%,则CSS输出将为:

filter: grayscale(50%);

演示