如何使用Compass filter mixin？

Question

我正在尝试在SCSS中以这种方式使用过滤器混合：

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

但是当我编译时，我收到了这个错误：

Undefined mixin 'filter'.

我正在使用这个带有Rails框架的Gem的最新版本。

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

Answer 1

SASS示例

@import 'compass/css3/filter'

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

Answer 2

您需要先导入罗盘过滤器。

要使用多个过滤器，请将所有内容放在filter（）中，不要使用逗号

@import 'compass/css3/filter'

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

Answer 3

根据Compass documentation，可以使用：@import "compass/css3/filter"在sass文件的顶部导入此文件。

然后在sass文件中，您可以将其用作

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