Libsass: 新的CSS过滤器功能与内置的Sass函数冲突

创建于 2013-08-16 · 26评论 · 资料来源: sass/libsass

如下代码：

foo {
  -webkit-filter: grayscale(100%);
}

使用sass 3.2.10的结果如下：

foo {
  -webkit-filter: grayscale(100%); }

但是libsass master的以下内容（当前为4dd61de67aa0284cd8da1e8f13e2f6b63b990041）：

/private/tmp/test/grayscale.scss:2: error: argument `$color` of `grayscale($color)` must be a color
Backtrace:
    /private/tmp/test/grayscale.scss:2, in function `grayscale`
    /private/tmp/test/grayscale.scss:2

这似乎与内置的灰度功能冲突。

Bug - Confirmed Dev - Test Written

资料来源

sorccu

最有用的评论

另一个解决方法：代替filter: invert()使用filter: #{"invert()"} 。您可以将任何您想要的内容放在引号中，并将其逐字输出。

tamlyn 于 2014-09-04

👍18 ❤1

所有26条评论

是的，我也刚打过。

benfrain 于 2013-09-04

也击中这个。

terracatta 于 2013-09-26

：+1：

calderas 于 2013-09-26

关于这个有什么消息吗？

dimoreira 于 2013-12-02

我目前正在研究@extend ，但是我会尽量在假期之前解决这个问题！

akhleung 于 2013-12-04

也有这个问题。

lmartins 于 2014-01-09

：+1：

确认darken()和saturate()也受到影响。有解决方法吗？

restlessdesign 于 2014-01-16

找到解决方法后，您可以同时使用此功能。它应该是一个嵌入式解决方案：

<strong i="6">@function</strong> grayscale($value) {
  <strong i="7">@return</strong> #{ "grayscale(" + $value + ")" };
}

如果您愿意，您也可以为其添加前缀：

<strong i="11">@mixin</strong> filter($properties) {
  // Your vendor prefixing stuff here, I am using Bourbon:
  <strong i="12">@include</strong> prefixer(filter, $properties, webkit moz spec);
}

然后，您可以编写：

<strong i="16">@include</strong> filter(grayscale(100%));

kennethormandy 于 2014-01-28

❤1

只需将其放在此处以供参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

akhleung 于 2014-01-30

@kennethormandy您是否发现了带有两个参数的SASS函数的变通方法？

<strong i="7">@function</strong> darken($color, $amount) {
  <strong i="8">@return</strong> #{ "darken(" + $color + "," + $amount ")" };
}

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

输出：

border: 1px solid darken(#f0f1f4,3"");

…但是实际上它甚至不应该输出darken它应该完全是一个新的颜色值。

restlessdesign 于 2014-02-13

~~哇，我不知道darken()不起作用。~~ @restlessdesign ，如果您摆脱了自定义功能，则darken()已经可以使用。所以只要写：

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

你会得到

.selector {
  border:1px solid #e7e9ee;
}

我认为您可能（可以理解）将Sass的功能与CSS过滤器混为一谈。我给出的示例仅能工作，因为它是CSS Filter 。如果您想使用Sass的变暗或饱和度，则应该按照Sass docs进行操作。如果要使用饱和的CSS过滤器，则可以基于我的greyscale()函数在正确的轨道上。有CSS darken()过滤器，因此您实际上现在只是重写libsass的内置深色函数。

kennethormandy 于 2014-02-13

我的错。我是嵌套方法，并称为adjust_hue而不是adjust-hue ，后者层叠为darken() 。残酷，但我喜欢LibSass实际上会报告错误或提供无效的输出，而不是默默地忽略呼叫！对不起，误报警。

restlessdesign 于 2014-02-13

+1
尽管该解决方法可以正常工作（谢谢@kennethormandy），但如果已修复，将很好。