使用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生成的雪碧圖。