使用sass與compass合併雪碧圖(一)

雪碧圖就是不少張小圖片合併成一張大圖片，以減小HTTP請求，從而提高加載速度。有不少軟件能夠合併雪碧圖，但一般不太容易維護，使用compass生成雪碧圖應該算是很是方便的方法了，能夠輕鬆的生成雪碧圖，並且易維護。

安裝sass與compass

安裝sass能夠參考這裏。

安裝完sass之後，使用下面命令安裝compass:

> gem install compass

配置環境

進入項目目錄，使用下面命令初始化項目：

> compass init

該命令會在當前目錄中生成一些文件：

- sass
  |-- ie.scss
  |-- print.scss
  |-- screen.scss

- stylesheets
  |-- ie.sss
  |-- print.sss
  |-- screen.sss

  config.rb

其中sass與stylesheets文件夾中的文件基本上沒什麼用。config.rb配置文件中的內容通常不須要改動，也能夠根據須要修改。

合併圖片

在當前目錄下建立一個images的文件夾放置全部圖片，而後在images文件夾中建立一個icons文件夾放置須要合併的圖片。在sass文件夾中建立一個icons.scss文件，在文件中寫入：

@import "icons/*.png";
@include all-icons-sprites;

而後，命令行執行compass compile命令，合併圖片工做就已完成。images文件夾中多了一張icons-*******.png的圖片。在stylesheets文件夾中會生成一個icons.css的文件：

.icons-sprite, .icons-car-icon, .icons-card-icon, .icons-hand-icon, .icons-light, .icons-pan, .icons-title, .icons-watch-icon, .icons-wheel, .icons-wheel1 {
    background-image: url('/images/icons-sd6ae4306cd.png');
    background-repeat: no-repeat;
}
    
.icons-car-icon {
    background-position: 0 0;
}

.icons-card-icon {
    background-position: 0 -124px;
}

.....

自定義類名

能夠看到上面生成的css文件中的類名都是自動生成的，在實際應用中一般並不會使用上面的默認類名，這時須要自定義類名：

@import "icons/*.png";
.car-icon {
    @include icons-sprite(car-icon);    
}

注意：@include icons-sprite(car-icon)不要寫成@include icons-sprites(car-icon)，不然會有意想不到的結果。@include all-icons-sprites這句能夠去掉，就不會生成默認的類名了。上面輸出的結果爲：

.icons-sprite, .car-icon {
    background-image: url('/images/icons-sd6ae4306cd.png');
    background-repeat: no-repeat;
}

.car-icon {
    background-position: 0 0;
}

雪碧地圖(Sprite maps)

可使用雪碧地圖取代上面的@import，以下：

$icons: sprite-map("icons/*.png", $spacing: 8px, $layout: horizontal);
.car-icon {
    background-image: sprite-url($icons);
    width: image-width(sprite-file($icons, car-icon));
    height: image-height(sprite-file($icons, car-icon));
    background-position: sprite-position($icons, car-icon);
    background-repeat: no-repeat;
}

結果：

.car-icon {
    background-image: url('/images/icons-s6844bf5750.png');
    width: 242px;
    height: 116px;
    background-position: 0 0;
    background-repeat: no-repeat;
}

上面使用了不少compass內置的方法：

sprite-url($icons); //獲取合併後雪碧圖的url；
sprite-file($icons, $name); //獲取目標icon；
image-width(); //獲取圖片寬度；
image-height(); //獲取圖片高度；
sprite-position($icons, $name); //獲取圖片座標

設置圖片尺寸

以前生成的css文件中並無設置圖片的尺寸，通常狀況下是須要設置的。能夠經過下面的設置設置圖片尺寸：

$icons-sprite-dimensions: true;

輸出結果：

.car-icon {
    background-position: 0 0;
    height: 116px;
    width: 242px;
}

上面的設置會爲每張圖圖片添加尺寸，也能夠指定爲某張圖片添加尺寸：

.car-icon {
    @include icons-sprite(car-icon);
    width: icons-sprite-width(car-icon);
    height: icons-sprite-height(car-icon);
}

佈局方式

佈局方式就是生成的雪碧圖中小圖片的排列方式。compass提供了四中排列方法：vertical、horizontal、diagonal和smart。默認排列方式是vertical。

使用方法就是在icons.scss文件中加上：

$icons-layout: "vertical";

其餘方式用法同樣。

下面是四種佈局生成的圖片：

垂直排列

水平排列

斜向排列

智能排列

設置間距

一般，咱們會在圖片與圖片之間設置必定的間距，添加一下代碼：

$icons-spacing: 8px;

上面爲圖片之間設置了8px的間距。

總結：

上面簡單介紹了使用compass製做雪碧圖。在使用生成的css文件時會有一個問題：在PC端咱們能夠直接使用生成的css文件，但在移動端並不能直接使用，由於移動端須要縮放圖片以適應不一樣分辨率的屏幕。然而生成的css文件的寬高都是使用絕對單位px的，這樣在移動端並不適用。因爲篇幅緣由，我會在下一篇介紹在移動端怎樣使用compass生成的雪碧圖。