sass – scss – compass – 透過 Compass 將圖片精靈化(Sprite)的步驟以及懶人方法
基本用法, 但建議了解進階用法後再決定
- 先查看 SCSS 設定檔 config.rb ，確定你的圖片設定位置，預設叫做 images
Encoding.default_external = 'utf-8' require 'compass/import-once/activate' # Require any additional compass plugins here. require 'susy' require 'breakpoint' # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" <---------------這裡!! javascripts_dir = "javascripts" # To enable relative paths to assets via compass helper functions. Uncomment: relative_assets = true <---------------這裡我會拿掉註解，改用相對資源(相對路徑的算法)
- 在根目錄底下建立你的圖片路徑 『images/”必須要有一個資料夾名稱”』，例如取名『images/my-icons』 ，裡面放入你要合併的 PNG 圖檔，只支援PNG喔！
- 開一張例如 sprite.scss 檔案，寫入
@import "compass/utilities/sprites";//需先引用compass的工具, 我試過沒寫也可以，可能預先已經加載了 @import "my-icons/*.png"; //『my-icons』是你自訂的資料夾名稱, 這裡是範例 @include all-my-icons-sprites; // 『all-』 後面接著的 『my-icons』也記得是你自訂的資料名稱
- 接著會產出 sprite.css 你也許可以看到例如這樣子
.my-icons-sprite, .my-icons-delete, .my-icons-edit, .my-icons-new, .my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } .my-icons-delete { background-position: 0 0; } .my-icons-edit { background-position: 0 -32px; } .my-icons-new { background-position: 0 -64px; } .my-icons-save { background-position: 0 -96px; }我們看到如『.my-icons-save』，其實就是Class利用一張背景圖+位移，來達到圖片的放置效果。我們看這個範例的命名如『.my-icons-』後面的名稱『save』，其實他代表的就是你原始圖檔名稱為『save.png』。參考Compass圖片合併功能
- 如果看到產生錯誤『NoMethodError: undefined method `parent’ for nil:NilClass』，那就是你的圖片名稱用了不合法命名方式，例如用了數字當作開頭，例如『001save.png』『中文標題.png』這樣都不行喔。圖片命名記得開頭要英文喔。
- 最後你的Class可能會這麼寫
.textbg { @include my-icons-sprite(textbg); //裡面指定你的圖檔名稱 width: image-width("my-icons/textbg.png"); //圖檔的寬 height: image-height("my-icons/textbg.png"); //圖檔的高 @include inline-block; //用在<a>或<i>的時候，可以讓她display:inline-block } - 當然，這樣子看起來一定很麻煩，因為每使用一張圖片就要手動去查寬度跟高度，有沒有什麼方法可以把寬度高度也一次固定出來呢？有的，請加入這項參數
$my-icons-sprite-dimensions: true; //預設false
這樣子就可以自動產生寬與高度囉！例如
.all-menu1-1 { background-position: 0 -603px; height: 30px; //自動抓出來 width: 66px; //自動抓出來 } .all-menu1-2 { background-position: 0 -633px; height: 30px; width: 66px; } .all-menu2-1 { background-position: 0 -663px; height: 30px; width: 66px; }這能讓你直接在HTML中直接標記要使用的class完全不用再寫CSS！
參考這裡的討論、官網關於『$<map>-sprite-dimensions』 - 如果你要使用 『<i class=”你的sprite自動產生的類別名稱”></i>』，那麼預設是看不到的。此時我們要修改display屬性為『inline-block』或是『block』，但是我們不希望再個別指定，怎麼做呢？很簡單，善用模型(model)概念
.inline_block { display: inline-block; }所以你套用圖片，會長類似這樣
<i class="all-top1_1search inline_block"></i>
當然你可以自己取名你習慣的簡短名稱。
* 我在CSS習慣使用『 _ 』來當作連接字元，是因為方便滑鼠點兩下就可以選取+PHP習慣。若用『 – 』連接，遇到class名稱叫做 “inline-block” 滑鼠點兩下就只能選取局部了。這是因為我常常需要選取class名稱方便搜尋修改囉！
上述可參考官方網站 。其中有些細部設定，可以參考這裡。下面是範例，記住把下面的『my-icons』換成你的資料夾名稱。
@import "compass/utilities/sprites"; //連結符號 $default-sprite-separator: "_"; //改用垂直 $my-icons-layout: horizontal; //若想讓合併的icon鬆散一點 $my-icons-spacing: 10px; @import "my-icons/*.png"; @include all-my-icons-sprites;
如果有巢狀結構，就是很多層的資料夾，那注意例如
@import "themes/orange/*.png"; @include all-orange-sprites; //『all-』後面接的是你png圖檔上一層的名稱喔！
進階用法
其中有 function 叫做 sprite-map 與 sprite 我們可以先了解一下。可以參考官方解說。
sprite-map(“你要合併的資料夾/*.png”)
例如
$icons: sprite-map("my-icons/*.png");
這會自動幫你建立一張sprite圖檔，並將這項資源返回給變數 $icons。
background: sprite(你的sprite-map資源, 你要使用的原圖檔檔名);
例如
background: sprite($icon, textbg);
避免每次都要重複動作，還要手動填寫圖片的寬與高度，我想我們可以用mixin包裝起來。
//自動取得sprite圖片中你指定的圖檔位置
//
//$folder 合併圖檔的所屬資料夾
//$icon 要取得的圖檔的原始名稱
@mixin divimg_sprite($folder, $icon_name) {
$icons: sprite-map("#{$folder}/*.png");
& {
background: sprite($icons, $icon_name);
@include inline-block;
width: image-width("#{$folder}/#{$icon_name}.png");
height: image-height("#{$folder}/#{$icon_name}.png");
}
}
用法
//我們只要分別指定圖檔所屬的資料夾名稱，與你要使用的圖檔名稱就可以囉。
//這會自動判斷sprite圖檔不存在，會建立。下次再呼叫的時候，因為sprite圖檔已經存在，就不會再重新花時間建立了。
.textbg {
@include divimg_sprite(my-icons, textbg);
}
如果有多層的話就…
.textbg {
@include divimg_sprite("my-icons/web2/menu_change", menu1);
}
選擇
上面介紹了基本方法、進階方法，適合用在不同需求。一般而言，如果只是單純呼叫圖片精靈的某張圖片，那麼基本方法就夠用了；如果常常要在SCSS中針圖片精靈的某些張圖片做個別調整，那麼使用進階方法比較適合喔。