compass Sprites 雪碧圖 小圖片合成[Sass和compass學習筆記]

demo 源碼 地址 https://github.com/qqqzhch/webfans

什麼是雪碧圖？

CSS雪碧 即CSS Sprites，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。

compass 中爲咱們提供了簡潔的工具和方法生成雪碧圖

API 在這裏 http://compass-style.org/reference/compass/utilities/sprites/

雪碧圖 只須掌握最簡單的 方法便可

能夠參考這裏的API

http://compass-style.org/reference/compass/helpers/sprites/

這裏咱們主要送 這個API

sprite-map($glob, ...)

 

首先 準備幾張圖片  png 的圖片 製做雪碧圖 推薦採用png圖片

咱們在圖片目錄下 創建Sprites 目錄 這裏放置那些須要合成的小縮略圖

而後咱們在sass目錄下見一個 sass文件，用做製做雪碧圖的基本配置

文件前加下劃線 標誌這是個小模塊 不獨立生成css文件

文件內容以下

@import "compass/utilities/sprites";
$sprite-default-margin:10px;
$my-icons-sprite: sprite-map("Sprites/*.png");

首先引入相關的庫，而後是個設置每一個小圖標之間的距離，

最後是聲明一個變量$my-icons-sprite 存儲 圖片映射sprite-map的結果

具體如何使用每一個小圖片呢？

代碼以下

@import "compass/reset";
@import '_sprites.scss';
h1 {}

h2 {} 

.mytest {
    width: 200px;
    color: #eee;
}
.mying1{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a11') no-repeat;
}
.mying3{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a33') no-repeat;
}
.mying4{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a4444') no-repeat;
}
.mying5{
	width: 300px;
	height: 300px;
	background: sprite($my-icons-sprite,'a555') no-repeat;
}

background: sprite($my-icons-sprite,'a555') no-repeat; 使用起來 仍是計較簡單的

這個例子生成的 demo以下