2013-04-07 9 views
15

私はSCSSでフィルターミックスインをこの方法を使用しようとしている:Compass filter mixinの使い方は?

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

しかし、私は、コンパイル時に、私はこのエラーを得た:

Undefined mixin 'filter'. 

私はこの宝石の最新バージョンを使用していますRailsフレームワーク。

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

+1

せずに、あなたはミックスインが定義されているファイルをインポートすることを忘れないでいましたか? @import "compass/css3/filter" ' – cimmanon

+1

@cimmanonええ!他のミックスインもうまくいきます::) –

答えて

1

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) 
20

SASS例

@import 'compass/css3/filter' 

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

注意:すべての/多分Firefoxはグレースケールフィルタをサポートしていません。 (ステータス:2014年6月)firefoxグレースケールのフォールバックについて:http://stackoverflow.com/questions/12173130/css-filter-not-working-in-firefox –

+2

実際に複数のフィルタを適用するには、それらをすべて渡す必要があります1つは '@include filter()'です。 2つの@includesを使用すると複数のフィルタプロパティが生成され、最後に使用されたものは以前のものより優先されます。 –

10

として使用することができます。複数のフィルタを使用するには

は、(すべてのフィルタの内側に置く)コンマ

@import 'compass/css3/filter' 

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