為了加快網頁載入的速度、減少使用者等待的時間,許多前端工程師會將網站需要用到的小圖示合併成一張大圖、再利用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張圖片的路徑。

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; }
在icon資料夾的上層資料夾裡、我們可以看到一張名為icon-s6194bebbcc.png 的sprite圖片。
這個sprite圖片的名稱規則是:資料夾名稱-亂數,只要icon資料夾的圖片有任何更新,sprite圖片就會跟著更新、sprite圖片名稱的亂數值也會跟著改變。而Compass每次都會幫我們載入最新的sprite圖片,您完全不需要操任何的心。
巢狀資料夾
如果圖示的資料夾位置修改成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; }
自動產生: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; }
加上寬度及高度的設定
現在我們要使用<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。
$<map>-layout 設定小圖示的排列方式
$<map>-layout: vertical;
$<map>-layout: diagonal;
$<map>-layout: horizontal;
$<map>-layout: smart;
$<map>-layout: smart;
只有在圖示大小不統一時才能看出效果。若是圖示大小一致的話,產生出來的sprite 大圖與$<map>-layout: vertical;
的結果相同。
另外當使用 $<map>-layout: smart;
時,$<map>-spacing
的設定就會變成無效。因為 $<map>-layout: smart;
會將小圖之間的空白去除。
以上是我們在設定CSS Sprite時常用的方法,如果您需要進一步的資料,可以參考Compass官網中的相關資料。
Post a comment