mixin 中的 CSS 函数 - 灰度答案

【问题标题】：CSS Function in mixin - grayscalemixin 中的 CSS 函数 - 灰度
【发布时间】：2013-10-24 21:01:37
【问题描述】：

我正在尝试创建一个用于灰度化 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 中，灰度已经是一个函数，而参数应该是一个颜色。

Module: Sass::Script::Functions - Sass Documentation

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

注意：我使用的是 phpsass。

【问题讨论】：

我不确定您的问题到底是什么。如果您需要字符串插值/转义函数名称并将其解析为 CSS - 那么我认为@MartinTurjak 下面的答案就是解决方案。

标签： css sass grayscale

【解决方案1】：

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

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

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

filter: grayscale(50%);

Demo

【讨论】：

【解决方案2】：

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

@include grayscale_element(100%);

当一个字符串被传递给 mixin 时，如你所说，它失败了。

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

应该估计类型。

【讨论】：

好的，谢谢你的回答，实际上我使用 PHPSass，我想这是问题所在，而不是真正的 SASS。