如何使用Compass filter mixin？

Question

我试图在SCSS中以这种方式使用filter mix:

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

但是当我编译时,我收到了这个错误:

Undefined mixin 'filter'.

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

Answer 1

SASS示例

@import 'compass/css3/filter'

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

要实际应用多个过滤器,您必须在一个`@include filter()`中传递它们.使用两个@includes将产生多个过滤器属性,最后一个包含used将覆盖任何早期的过滤器属性. (2认同)

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 文档，可以使用以下命令导入该文件：@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)