uncategorized

用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>，這樣也是可以的

Share