如何使用Compass過濾器mixin？

我試圖使用過濾器在SCSS MIXIN這樣：如何使用Compass過濾器mixin？

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

但是，當我編譯，我得到這個錯誤：

Undefined mixin 'filter'.

我使用了最新版本的寶石Rails框架。

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

來源

2013-04-07 Caio Tarifa

你記得導入其中混入定義的文件？ '@import「compass/css3/filter」' – cimmanon 2013-04-07 22:56:45

@cimmanon是的！其他mixin工作得很好...... :) – 2013-04-08 05:58:22

根據Compass documentation這個文件可以使用輸入：@import "compass/css3/filter"在青菜文件的頂部。

然後在SASS文件，你可以使用它作爲

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

來源

2013-04-09 08:18:56

SASS例

@import 'compass/css3/filter' 

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

來源

2013-05-10 18:12:49

注意：並非所有/可能任何Firefox支持灰度過濾器。（狀態：2014年6月）對於Firefox的灰度回退：請參閱http://stackoverflow.com/questions/12173130/css-filter-not-working-in-firefox – 2014-06-12 09:01:51

要實際應用多個過濾器，您必須將它們全部傳入一個'@include filter（）'。使用兩個@includes會產生多個過濾器屬性，最後使用的將覆蓋之前的任何一個。 – 2014-06-20 15:47:33

你需要先導入指南針過濾器。

要使用多個過濾器把所有的內部過濾器（）沒有逗號

@import 'compass/css3/filter' 

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

來源

2013-11-05 12:32:45 brunnolou

如何使用Compass過濾器mixin？

回答

相關問題