How to use Compass filter mixin?

Question

I'm trying to use filter mixin this way in SCSS:

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

But when I compile, I got this error:

Undefined mixin 'filter'.

I'm using the latest version of this Gem with Rails framework.

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

Answer 1

SASS Example

@import 'compass/css3/filter'

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

Answer 2

You need to import compass filter first.

To use multiple filters put all inside filter() without commas

@import 'compass/css3/filter'

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

Answer 3

According to Compass documentation this file can be imported using: @import "compass/css3/filter" at the top of sass file.

And then in sass file you can use it as

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