4

我正在尝试创建一个用于灰度化 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。

4

2 回答 2

14

如果您只是想避免将该grayscale函数作为 Sass 函数进行评估,请使用字符串插值。像这样的东西:

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

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

filter: grayscale(50%);

演示

于 2013-10-24T12:10:57.937 回答
0

只要我包含以下mixin,代码就可以正常工作:

@include grayscale_element(100%);

当一个字符串被传递给 mixin 时,它就像你提到的那样失败了。

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

应该估计类型。

于 2013-10-24T10:07:57.823 回答