(三)Sass和Compass--製做精靈圖片

6.1 精靈的工做原理

// 將各類圖片合併到一張圖片裏面,並在不一樣的狀態下改變背景圖片的位置;

 

6.2 精靈的重要性

// 壓縮圖片的內存;

// 減小HTTP請求

6.2.3 Compass處理精靈方案

// 1.讓Compass指向一個精靈的文件夾;

// 2.告訴Compass撰寫精靈CSS;

// 3.編譯樣式表;

 

6.3 用Compass製做精靈

 6.3.1 建立一個精靈地圖

1 @import "compass/utilities/sprites";    // 精靈圖片控件;
2 @import "Icon/*.png";                   // Icon文件夾位於images文件夾內幷包含全部精靈圖片;
3 
4 // 生成精靈圖片位於images文件夾內;並生成編譯後的CSS;
5 CSS: 6     .Icon-sprite {　　　　　　　　　　　　 // 自動生成的類命名; 7       background-image: url('/images/Icon-s040daee5af.png'); 8       background-repeat: no-repeat; 9     }

6.3.2 引入精靈並生成CSS

 1 1.all-sprites精靈混合器  2 Sass:  3     @include all-Icon-sprites; // 爲整個精靈地圖撰寫全部必要的CSS;
 4 CSS:　　　　　　　　　　　　　　　　　　　　 // 生成內容;  5     .Icon-sprite, .Icon-index1, .Icon-index2, .Icon-index3, .Icon-index4, .Icon-index5 {  6         background-image: url('/images/Icon-s040daee5af.png');　　// 全部的相關類都引用此圖片;  7         background-repeat: no-repeat;  8  }  9     .Icon-index1 { 10         background-position: 0 0; 11  } 12  ... 13     .Icon-index5 { 14         background-position: 0 -560px; 15  } 16 
17 // 使用@extend繼承精靈的樣式
18 Sass: 19     .add-button { @extend .Icon-index1} // 這種方法會生成更少的CSS;
20 CSS: 21     .Icon-index1, .add-button {　　　　 // 直接疊加了一個類,比較方便; 22         background-position: 0 0; 23     }

 1 2.single-sprite精靈混合器  2 Icon-sprite($name);                     // 輸出一個獨立命名精靈的CSS; $name:單獨圖片的名字(index1);
 3 Sass:  4     .add-button2 {  5         @include Icon-sprite(index5);  6  }  7 CSS:  8     .add-button2 {  9         background-position: 0 -560px; // 與index5對應的圖片的位置; 10     }

 

6.4 配置Compass精靈

 6.4.1 自定義精靈地圖

 // 能夠自定義一個精靈地圖或經過其配置變量有針對性地定義精靈;

// <map>:存放精靈的文件名;

// <sprite>:某個單獨的精靈圖片的名字;

// 如下配置的全部變量需在導入精靈("@include all-Icon-sprites")以前被定義;

1 1.配置精靈圖之間的間距 2 $<map>-spacing:Xpx;                     // 設置全部精靈圖之間的間距爲Xpx;
3 $<map>-<sprite>-spacing:Xpx;            // 設置某個精靈圖的間距;
4 Sass: 5     $Icon-spacing:4px;                  // 全部圖片的間距爲4px;
6     $Icon-index1-spacing:12px;          // index1圖片的間距爲12px;

1 2.設置精靈的重複性 2 $<map>-repeat:no-repeat/repeat-x;       // 默認值是no-repeat;設置爲repeat-x可使其X軸平鋪; 3 $<map>-<sprite>-repeat:no-repeat/repeat-x;　　// 設置單個圖片的重複屬性;
4 Sass: 5     $Icon-index2-repeat:repeat-x;       // index2圖片在精靈圖片裏邊橫向平鋪;

3.設置精靈的位置 $<map>-position:Xpx;                      // 垂直向右(水平向下)移動Xpx距離;
$<map>-<sprite>-position:Xpx; Sass: $Icon-positioin: 10px;　　　　　　　　 // 全部圖片向右10px;

1 4.設置精靈地圖的佈局 2 $<mpa>-layout: vertical(垂直)/horizontal(水平)/diagonal(對角線)/smart(產生最小的空白區域);  // 默認佈局是vertical;
  $Icon-layout:horizontal;　　　　　　　 // 在引入sprites模塊以前定義;

1 5.清除過時的精靈地圖 2 $<map>-clean-up:true/false;

 6.4.2 自定義精靈的CSS

 1 1.輸出精靈的尺寸  2 $<map>-sprite-height($name);            // 獲得某個精靈圖片的高度;
 3 $<map>-sprite-width($name);  4 $<map>-sprite-dimensions:true/false;    // 爲精靈地圖中的每一個精靈自動輸出尺寸;  5 Sass:  6  .next {  7         @include Icon-sprite(index2);  8         width:Icon-sprite-width(index2);// 獲得精靈圖片的大小;
 9  } 10 CSS: 11  .next { 12         background-position: -10px -150px; 13  width: 140px;　　　　　　　　　　 // 生成的圖片大小; 14     }

 1 2.精靈的基礎類  2 // Compass能夠方便地經過生成一個基礎類爲每一個精靈應用普通樣式;
 3 $<map>-sprite-base-class:".class-name";  4 // 當使用所有精靈或單獨精靈的混合器時,Compass會輸出一個精靈的基礎類;而且其選擇器還會串聯全部設置了background-image屬性的選擇器;
 5 // 每一個精靈地圖的基礎類都以其文件夾的名字命名;
 6 Sass:  7     $Icon-sprite-base-class: ".Icon";  8     .Icon {                             // 設置精靈的CSS基礎類;
 9  overflow: hidden; 10         width:Icon-sprite-width(index1); 11  } 12 CSS: 13     .Icon, .Icon-index1, .Icon-index2, .Icon-index3, .Icon-index4, .Icon-index5 { 14  overflow: hidden; 15  width: 140px; 16     }

 1 3.魔術精靈選擇器  2 $disable-magic-sprite-selectors:true/false;
 3 // 魔術精靈選擇器是默認開啓的,也就是說Compass在精靈時會根據以"_hover"/"_active"或"_target"結尾的名字自動輸出CSS的:hover/:active和:target僞選擇器;
 4 // 在Icon文件夾內添加index4_hover.png以後會自動生成關於index-4:hover的類及相關代碼;
 5 CSS:  6     .Icon-index4 {  7         background-position: 0 -420px;  8  }  9     .Icon-index4:hover, .Icon-index4.index4-hover { 10         background-position: 0 -560px; 11     }

 

6.5 駕馭精靈輔助器

 6.5.1 建立精靈地圖

 // 以前的"@import 'Icon/*.png'",不只建立了一個精靈地圖,還爲精靈地圖和每一個精靈設置了混合器和變量;

1 1.sprite-map輔助器 2 $Icon:sprite-map("Icon/*.png",$layout:smart);   // 它會建立一個智能佈局的精靈地圖,並把精靈地圖的圖片URL賦值給$Icon變量;

1 2.sprite-map輔助器--設置單個精靈 2 $Icon:sprite-map("Icon/*.png",$index2-spacing:5px);

 6.5.2 撰寫精靈的CSS

 // 在Compass爲你生成精靈地圖以後,仍須要寫出每一個精靈的CSS;

 1 1.sprite輔助器  2 sprite($map,$sprite,[$offset-x],[$offset-y]);
　　// $map:精靈基礎類; $sprite:單個圖片名,用於定位背景圖片;  3 // sprite輔助器須要精靈地圖/精靈的名字以及可選的偏移座標;
 4 Sass:  5     $Icon:sprite-map("Icon/*.png",$layout:smart);  6     // 精靈基礎類的一個優勢就是隻須要賦值一次背景圖片(把路徑複製到變量中);
 7  .next {  8         background:sprite($Icon,index2) no-repeat;  9  } 10 // 這僅僅會輸出背景屬性,而不會成爲一個精靈的基礎類或其餘任何不須要的CSS;
11 CSS: 12  .next { 13         background: url('/images/Icon-s6558f78e4f.png') 0 -140px no-repeat; 14     }

 1 2.設置精靈的位置  2 // 爲了移除重複的背景圖片,你能夠用sprite-position輔助器或sprite-background-position混合器取代sprite輔助器;
 3 Sass:  4     $Icon:sprite-map("Icon/*.png");             // 輔助器建立精靈地圖;
 5     .sprite-base { background:$Icon no-repeat; }// 引入精靈地圖;
 6  .next {  7         @extend .sprite-base;                   // @extend引用;
 8         background-position:sprite-position($Icon, index2);  9         // 設置background-position屬性;
10         // sprite-position:輔助器,用於定位圖片位置;
11         // $Icon:變量,引入精靈圖片路徑;
12         // index2:定位精靈圖片index2位置的參數;
13  } 14 CSS: 15     .sprite-base, .next { 16         background: url('/images/Icon-sb501daeae5.png') no-repeat; 17  } 18  .next { 19         background-position: 0 -140px; 20     }

 1 3.設置精靈的尺寸--sprite-dimensisons混合器  2 // 它須要精靈地圖和精靈的名字,並輸出通過測量的尺寸;
 3 Sass:  4     $Icon:sprite-map("Icon/*.png");             // 輔助器建立精靈地圖;
 5     .sprite-base { background:$Icon no-repeat; }// 引入精靈地圖;
 6  .add {  7         @extend .sprite-base;  8         @include sprite-background-position($Icon,index3);  // 精靈圖片定位輔助器;
 9         @include sprite-dimensions($Icon,index3); 10     }

 6.6  小結

// 1.從遠程服務器加載大量圖片對性能的影響以及精靈圖片如何做爲重要方法解決高流量網站問題;

// 2.Compass如何徹底自動化處理精靈,並探索了配置及控制Compass生成精靈地圖和CSS的幾種方式;