logo头像

Edward.K Thinking

用Compass產生多圖檔合併並讓CSS對應位置

網頁開發中常常會使用到很多小icon或是小圖,一般來說可以直接抓取網路上的font-awesome套件就可以,不過,若是今天icon或是小圖是自己設計師開發或是具有產品相關識別的話,就不能用font awesome代替了,以前的做法就是每個有需要icon地方,加上圖檔的link

1
<img src='http://XXXX.jpg></img>

就可以把圖檔插入到網頁中,或是在某個標籤做為背景圖放入,基本上無太大問題,但是,一旦網頁的圖檔多的時候,使用者端就必須發出很多request下載這圖檔,在效能就會慢一點,另外,就是要管理這些圖檔也不是那樣方便。

因此,在這情況下可以用雪碧(Sprite)方式,將多個圖檔合成一個檔案,這樣不僅方便,且request量也相對減少,速度也會稍快。通常這樣做法,在沒有compass之前,也是可以用photoshop去合併圖檔產生,然後在去CSS刻上相對應的圖片位置,這方式相對費工。這時候如果透過Compass產生就很簡單,也會自動在Css內mapping相對應的圖片

在使用compass之前,必須先確定好你的環境是否已經可以支援compass了,一開始,我們先設定要產生雪碧的compass程式

1
2
3
$Navicon-layout: 'smart';
$Navicon-spacing: 5px;
$Navicon: sprite-map("Navicon/*.png");

其中,Layout部分可以分為Vertical,Horizontal,Diagonal,Smart這四種Diagonal是橫向排圖,所產生的圖檔較大,我習慣用smart讓它自己決定產生的Sprint方式,Spacing主要是每個圖檔的間隔距離要多遠。

Sprite-map就是對應到你要合併成一個Spring的資料夾位置,這樣就可以將所有圖檔合併成下面這個樣子

在上面變數中可以發現都是用$Navicon開頭,Navicon主要是資料夾名稱,務必要跟資料夾名稱一樣,然後再加入下面兩行

1
2
@import "Navicon/*.png";
@include all-Navicon-sprites(true);

若是後續不需要知道Sprite-map的話,關於Sprite-map這一段可以省略,直接加入@import “Navicon/*.png 這一行就可以了,就能直接去指定的資料夾中抓取所有圖檔進行合併,之後使用all-Navicon-sprites指令進行圖檔合併與產生對應的CSS,這個指令中間的Navicon也請務必和合併的資料夾名稱一樣,有設定true在CSS中就會抓取圖檔原始尺寸大小並在Css設定指定的大小這樣完畢後,就會產生下面的CSS

很快產生合併的圖檔,CSS也會對應好,然後,你只要在想要這圖檔的HTML中加入這樣語法

1
<button type="button" class="Navicon-contact_b Active "> </button>

或是你要跟font-awesome一樣,設定<i class=’XXXX’></i>,這樣也是可以的

上一篇