簡單究好 Simple is Best

網頁前端開發資訊

使用Compass自動生成CSS sprite、將小圖示合併成大圖

為了加快網頁載入的速度、減少使用者等待的時間,許多前端工程師會將網站需要用到的小圖示合併成一張大圖、再利用CSS來定位各個小圖示,這就是所謂的CSS sprite。CSS sprite可以減少HTTP的請求次數、加快網頁載入的速度。有許多工具都可以幫我們生成CSS sprite,這在篇文章中、我要介紹如何使用Compass自動生成 CSS sprite。

使用Compass製作CSS sprite非常輕鬆、。只要將圖示放在同一個資料夾內、再加上二行的語法,就完成合併圖片的動作囉!

基本用法Basic Spriting

Step1 首先準備好需要的圖示。
在這個範例裡我們準備了4張png 的圖片。每個圖示的尺寸是48×48 pixel。(*注意:Compass只支援png圖片、其餘圖片格式一律不支援哦。)

Step2 設定專案的圖片資料夾。
開啟專案設定檔config.rb輸入底下語法、將圖片資料夾設成images。

images_dir = "images"

Step3
在images資料夾裡再新增一個icon資料夾,並將所有的圖示檔放進去。底下就是4張圖片的路徑。

css-sprite-1
images/icon/delete.png
images/icon/edit.png
images/icon/save.png
images/icon/search.png

Step4
接著我們只要在SCSS檔案裡加上底下二行語法就ok囉

@import "icon/*.png";
@include all-icon-sprites;

在上面的語法中,第二行@include all-icon-sprites;裡的icon就是圖示資料夾的名稱。

接著在相對應的CSS檔裡、我們就可以得到底下的結果:

.icon-sprite, .icon-delete, .icon-edit, .icon-save, .icon-search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.icon-delete { background-position: 0 0; }

.icon-edit { background-position: 0 -48px; }

.icon-save { background-position: 0 -96px; }

.icon-search { background-position: 0 -144px; }

css-sprite-2

在icon資料夾的上層資料夾裡、我們可以看到一張名為icon-s6194bebbcc.png 的sprite圖片。

這個sprite圖片的名稱規則是:資料夾名稱-亂數,只要icon資料夾的圖片有任何更新,sprite圖片就會跟著更新、sprite圖片名稱的亂數值也會跟著改變。而Compass每次都會幫我們載入最新的sprite圖片,您完全不需要操任何的心。

css-sprite-3


巢狀資料夾

如果圖示的資料夾位置修改成images/icons/admin,那麼我們的語法就要改成:

@import "icons/admin/*.png";
@include all-admin-sprites;

第二行@include all-admin-sprites;中,admin就是圖示資料夾的名稱。

**圖片如果存放在巢狀資料夾中、會以底層資料夾作為sprite的名稱。


自訂CSS類別名稱

預設情況下、Compass所產生出來的CSS樣式名稱規則是:資料夾名稱-圖片名稱。我們也可以進一步自訂CSS樣式名稱。

@import "icon/*.png";
.actions {
  .remove  { @include icon-sprite(delete); }
  .pen    { @include icon-sprite(edit);   }
  .save    { @include icon-sprite(save);   }
  .search  { @include icon-sprite(search); }
}

得到的CSS如下

.icon-sprite, .actions .remove, .actions .pen, .actions .save, .actions .search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.actions .remove { background-position: 0 0; }
.actions .pen { background-position: 0 -48px; }
.actions .save { background-position: 0 -96px; }
.actions .search { background-position: 0 -144px; }

 

css-sprite-SelectorControl


自動產生:hover、:active、:focus等選擇器

如果我們希望在滑鼠滑入時載入不同的圖片,可以使用Compass幫我們自動生成:hover:active:focus等狀態選擇器。這是一個非常好用的功能,在準備圖示的時候、同時準備不同狀態的圖片、並且注意圖片的命名。圖片的命名規則是:CSS類別名稱-狀態。

現在我們再開一個admin資料夾備用,接著準備四張圖片,分別是:edit.png、edit-active.png、edit-focus.png、edit-hover.png,將這四張圖片放進剛剛開好的admin資料夾中。(**圖片的命名方式也可以使用_(下底線)連接樣式名稱及狀態,如:edit_active.png )

接著設定Sass

@import "admin/*.png";
@include all-admin-sprites;

生成的CSS就會變成:

.admin-sprite, .admin-edit { background-image: url('/images/icon/admin-sb3bdde07da.png'); background-repeat: no-repeat; }

.admin-edit { background-position: 0 -144px; }
.admin-edit:hover, .admin-edit.edit-hover { background-position: 0 -96px; }
.admin-edit:active, .admin-edit.edit-active { background-position: 0 0; }
.admin-edit:focus, .admin-edit.edit-focus { background-position: 0 -48px; }

css-sprite-5


加上寬度及高度的設定

現在我們要使用<map>-sprite-height<map>-sprite-width來幫sprite加上寬度及高度的設定:

@import "icon/*.png";
.actions {
  .remove  { 
    @include icon-sprite(delete);
    width: icon-sprite-height(delete); 
    height: icon-sprite-width(delete);
  }
  .pen     { @include icon-sprite(edit);   }
  .save    { @include icon-sprite(save);   }
  .search  { @include icon-sprite(search); }
}

得到結果如下:

.icon-sprite, .actions .remove, .actions .pen, .actions .save, .actions .search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.actions .remove { background-position: 0 0; width: 48px; height: 48px; }
.actions .pen { background-position: 0 -48px; }
.actions .save { background-position: 0 -96px; }
.actions .search { background-position: 0 -144px; }

上面的例子是幫每個圖示個別設定寬度及高度。如果要幫全部的圖示都加上寬度及高度的設定,則必須使用$<map>-sprite-dimensions

$icon-sprite-dimensions:true;
@import "icon/*.png";
@include all-icon-sprites;

得到的CSS如下:

.icon-sprite, .icon-delete, .icon-edit, .icon-save, .icon-search { background-image: url('/images/icon-s6194bebbcc.png'); background-repeat: no-repeat; }

.icon-delete { background-position: 0 0; height: 48px; width: 48px; }

.icon-edit { background-position: 0 -48px; height: 48px; width: 48px; }

.icon-save { background-position: 0 -96px; height: 48px; width: 48px; }

.icon-search { background-position: 0 -144px; height: 48px; width: 48px; }

Compass CSS sprite 的實用功能

Compass提供了幾個方法,讓我們容易掌握產生出來的CSS sprite,除了前面提到的$<map>-sprite-dimensions之外,常見的還有:

$<map>-spacing:定義產生出來的CSS sprite大圖上,每個小圖示之間的距離,預設值是0,單位是px。

$<map>-layout:定義產生出來的CSS sprite大圖上,每個小圖示的排列方式:共有horizontal、vertical、diagonal、smart四種。

以上這些的設定的方法都必須寫在 @import "<map>/*.png"之前才會有作用哦。


$<map>-spacing 設定小圖示之間的間距

$icon-spacing: 20px;
@import "icon/*.png";
@include all-icon-sprites;

上面sass設定所產生出來的sprite圖片,各個小圖之間的間距為20px。

icon-spacing


$<map>-layout 設定小圖示的排列方式

$<map>-layout: vertical;

layout-default

 

$<map>-layout: diagonal;

layout-diagonal

 

$<map>-layout: horizontal;

layout-horizontal

 

$<map>-layout: smart;

layout-smart

 

$<map>-layout: smart; 只有在圖示大小不統一時才能看出效果。若是圖示大小一致的話,產生出來的sprite 大圖與$<map>-layout: vertical; 的結果相同。

另外當使用 $<map>-layout: smart; 時,$<map>-spacing的設定就會變成無效。因為 $<map>-layout: smart;會將小圖之間的空白去除。

以上是我們在設定CSS Sprite時常用的方法,如果您需要進一步的資料,可以參考Compass官網中的相關資料。

 

 

Post a comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *