如何使用Compass过滤器mixin？

Question

我正在尝试在SCSS中使用过滤器混合(Mixin)，代码如下:

a {
  @include filter(grayscale(100%));
}

但是当我编译时，出现了这个错误：

Undefined mixin 'filter'.

我正在使用Rails框架的最新版本Gem。

http://compass-style.org/reference/compass/css3/filter/

- Caio Tarifa

---

你记得导入定义mixin的文件了吗？@import "compass/css3/filter" - cimmanon

@cimmanon 是的！其他混入（mixins）也很好用... :) - Caio Tarifa

Answer 1

SASS示例

@import 'compass/css3/filter'

.filtered
  @include filter(grayscale(50%))
  @include filter(blur(2px))

- Logan Koester

---

注意：并非所有/可能没有Firefox支持灰度滤镜。（状态：2014年6月）对于Firefox灰度回退，请参见https://dev59.com/zGct5IYBdhLWcg3wUb5- - Christoph Eberhardt

要实际应用多个过滤器，您必须在一个 @include filter() 中传递它们全部。使用两个 @includes 将产生多个过滤器属性，并且最后一个包含的将覆盖任何早期的过滤器。 - Kevin M

Answer 2

你需要先导入指南针过滤器。

如果要使用多个过滤器，请将它们全部放在 filter() 中，不要用逗号隔开。

@import 'compass/css3/filter'

// multiple calls like this:
.filtered {
    @include filter(blur(4px) brightness(1.3) saturate(1.5));
}

- brunnolou

Answer 3

根据Compass文档，可以在sass文件顶部使用@import "compass/css3/filter"导入此文件。然后在sass文件中，您可以将其用作：

filter($filter-1, $filter-2, $filter-3, $filter-4, $filter-5, $filter-6, $filter-7, $filter-8, $filter-9, $filter-10)

- Aleksei Anatskii