sass – scss – compass – 透過 Compass 將圖片精靈化(Sprite)的步驟以及懶人方法

2015-01-30 / JSN / 0 Comments / 1,785 次瀏覽

 基本用法, 但建議了解進階用法後再決定

1. 先查看 SCSS 設定檔 config.rb ，確定你的圖片設定位置，預設叫做 images
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   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 <---------------這裡我會拿掉註解，改用相對資源(相對路徑的算法)

2. 在根目錄底下建立你的圖片路徑 『images/”必須要有一個資料夾名稱”』，例如取名『images/my-icons』 ，裡面放入你要合併的 PNG 圖檔，只支援PNG喔！
3. 開一張例如 sprite.scss 檔案，寫入
   
   1 2 3 4 5

   @import "compass/utilities/sprites";//需先引用compass的工具, 我試過沒寫也可以，可能預先已經加載了 @import "my-icons/*.png"; //『my-icons』是你自訂的資料夾名稱, 這裡是範例 @include all-my-icons-sprites; // 『all-』 後面接著的 『my-icons』也記得是你自訂的資料名稱

4.  接著會產出 sprite.css 你也許可以看到例如這樣子
   
   1 2 3 4 5 6 7 8 9 10 11 12

   .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圖片合併功能
5. 如果看到產生錯誤『NoMethodError: undefined method `parent’ for nil:NilClass』，那就是你的圖片名稱用了不合法命名方式，例如用了數字當作開頭，例如『001save.png』『中文標題.png』這樣都不行喔。圖片命名記得開頭要英文喔。
6. 最後你的Class可能會這麼寫
   
   1 2 3 4 5 6 7 8

   .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 }

7. 當然，這樣子看起來一定很麻煩，因為每使用一張圖片就要手動去查寬度跟高度，有沒有什麼方法可以把寬度高度也一次固定出來呢？有的，請加入這項參數
   
   1 2 3

   $my-icons-sprite-dimensions: true; //預設false

   
   這樣子就可以自動產生寬與高度囉！例如
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   .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』
8. 如果你要使用 『<i class=”你的sprite自動產生的類別名稱”></i>』，那麼預設是看不到的。此時我們要修改display屬性為『inline-block』或是『block』，但是我們不希望再個別指定，怎麼做呢？很簡單，善用模型(model)概念
   
   1 2 3 4 5

   .inline_block {     display: inline-block; }

   
   所以你套用圖片，會長類似這樣
   
   1 2 3

   <i class="all-top1_1search inline_block"></i>

   
   當然你可以自己取名你習慣的簡短名稱。

* 我在CSS習慣使用『 _ 』來當作連接字元，是因為方便滑鼠點兩下就可以選取+PHP習慣。若用『 – 』連接，遇到class名稱叫做 “inline-block” 滑鼠點兩下就只能選取局部了。這是因為我常常需要選取class名稱方便搜尋修改囉！

上述可參考官方網站 。其中有些細部設定，可以參考這裡。下面是範例，記住把下面的『my-icons』換成你的資料夾名稱。

如果有巢狀結構，就是很多層的資料夾，那注意例如

進階用法

其中有 function 叫做 sprite-map 與 sprite 我們可以先了解一下。可以參考官方解說。

sprite-map(“你要合併的資料夾/*.png”)

例如

這會自動幫你建立一張sprite圖檔，並將這項資源返回給變數 $icons。

background: sprite(你的sprite-map資源, 你要使用的原圖檔檔名);

例如

避免每次都要重複動作，還要手動填寫圖片的寬與高度，我想我們可以用mixin包裝起來。

用法

如果有多層的話就…

選擇

上面介紹了基本方法、進階方法，適合用在不同需求。一般而言，如果只是單純呼叫圖片精靈的某張圖片，那麼基本方法就夠用了；如果常常要在SCSS中針圖片精靈的某些張圖片做個別調整，那麼使用進階方法比較適合喔。