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.

Did you remember to import the file where the mixin is defined? `@import "compass/css3/filter"` — cimmanon, Apr 07 '13 at 22:56

score 22 · Answer 1 · answered May 10 '13 at 18:12

22

SASS Example

@import 'compass/css3/filter'

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

answered May 10 '13 at 18:12

Logan Koester

Attention: not all/possibly any firefox supports grayscale filters. (Status: June 2014) For a firefox grayscale fallback: See http://stackoverflow.com/questions/12173130/css-filter-not-working-in-firefox – Christoph Eberhardt Jun 12 '14 at 09:01
2

To actually apply multiple filters you will have to pass them all in one `@include filter()`. Using two @includes will produce multiple filter properties and the last one included used will override any earlier ones. – Kevin M Jun 20 '14 at 15:47

score 10 · Answer 2 · answered Nov 05 '13 at 12:32

10

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));
}

answered Nov 05 '13 at 12:32

brunnolou

score 1 · Answer 3 · edited Aug 02 '17 at 06:59

1

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)

edited Aug 02 '17 at 06:59

MikeT

answered Apr 09 '13 at 08:18

Aleksei Anatskii

3 Answers3