compass模塊----Utilities----Sprites精靈圖合圖

css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術。使用css雪碧圖，可以減小頁面的請求數、下降圖片佔用的字節，以此來達到提高頁面訪問速度的目的。可是它也有使人詬病的地方，就是拼圖和後期維護的成本比較大。也正是由於這一點，致使不少開發者懶於使用css雪碧圖。

配置compass項目

$ compass init

會生成相應的目錄和配置文件。在images目錄下創建logo目錄存放需合併的圖標。項目目錄結構以下：

- sass
 |-- icons.scss
 |-- screen.scss - stylesheet - images |-- logo

 config.rb 文件配置以下：

1 http_path = "/" 2 css_dir = "stylesheets" 3 sass_dir = "sass" 4 images_dir = "images" 5 javascripts_dir = "javascripts" 6 
7 relative_assets = true // 使用相對目錄 8 line_comments = false // 關閉行註釋

合併雪碧圖

輸出全部雪碧圖樣式

新建一個文件icons.scss，在screen.scss中引入icons.scss。

在icons.scss裏面引入sprites: @import "compass/utilities/sprites" 

images文件裏子目錄logo：把全部圖片放到這裏。（方便未來將其和其餘圖片區分開來）

在icons.scss文件裏將logo文件引入進來： @import "logo/*.png"; （*引入logo目錄下的全部文件）。

1 @import "compass/utilities/sprites"; // 加載compass sprites模塊 2 @import "share/*.png"; // 導入share目錄下全部png圖片 3 @include all-share-sprites; // 輸出全部的雪碧圖css

生成的代碼中 .logo-sprite 是雪碧圖的基礎類生成的每一個雪碧圖默認的class規則是： .目錄名-圖片名 。

 

調用單個雪碧圖樣式

1 @import "compass/utilities/sprites";  // 加載compass sprites模塊 2 @import "share/*.png"; // 導入logo目錄下全部png圖片 3 .main-logo{ 4  @include logo-sprite("img1"); 5 }

編譯後的css爲：

1 .logo-sprite, .main-logo {
2  background-image: url('../images/logo-sd097a30ac3.png');
3  background-repeat: no-repeat;
4 }
5 .main-logo {
6  background-position: 0 0;
7 }

利用魔術精靈選擇器智能輸出

好比hover, active, focus, target等。利用compass的魔術精靈選擇器咱們就能夠智能的合併各狀態的圖標，並輸出對應的css。使用時，咱們須要將圖標按照必定的規則命名。例如：

img1.png            // 默認狀態圖標
img1_hover.png     // hover狀態圖標
img1_active.png     // active狀態圖標

編譯後的css爲：

 1 .logo-sprite, .main-logo {
 2  background-image: url('../images/logo-sd097a30ac3.png');
 3  background-repeat: no-repeat;
 4 }
 5 .main-logo {
 6  background-position: 0 0;
 7 }
 8 .main-logo:hover, .main-logo.img1-hover {
 9  background-position: -120px 0;
10 }
11 .main-logo:active, .main-logo.img1-active {
12  background-position: -60px 0;
13 }

 

調出隱藏的logo.scss命令行：

compass sprite 'images/logo/*.png'

$logo-sprite-dimensions：用來控制輸出CSS的時候是否根據圖片大小對咱們的相應類名css屬性添加一個寬和高。
$logo-layout:修改合圖佈局方式。

　　--默認是垂直 horizontal水平的。

　　--diagonal斜對角線佈局的。

　　--smart節省空間佈局

1 $logo-sprite-dimensions: true; 2 $logo-layout: horizontal;