compass框架的sprite雪碧圖的用法簡要

---恢復內容開始---

**簡介**

CSS SPRITE 即 CSS雪碧，便是將諸多圖片合成一張圖片，而後使用CSS 的background和background-position屬性渲染。

這樣作的好處是：減小了網站的HTTP請求次數

**compass如何合併雪碧圖**

1. 把須要合併的圖片(1.png,2.png,3.png…)放在images文件下的新建一個文件夾test

2. 在SCSS文件中 用 @import 指向這些上述圖片們,而後compass會自動將這些圖片們合併成一個圖片

    @import "test/*.png";//表示全部的png格式的圖片

3. 關於圖片們的合併方向：

默認下，是豎着。
要修改排列方向：

    /*水平排列*/
    $test-layout:horizontal;
    @import "test/*.png"

    /*對角線排列*/
    $test-layout:diagonal;
    @import "test/*.png"

4. 使用雪碧圖：

    @include all-文件夾名-sprites;

自動就是無平鋪的no-repeat;

5. 若要在某個指定選擇器中使用雪碧圖中的某個圖片：

    div{
        @include test-sprite(圖片文件名)；//圖片文件名沒必要後綴

    }

6. 指定指定選擇器的高度和寬度（要有高度喲。否則網頁中看不到圖 的）：

    div{
        @include test-sprite(圖片文件名)；
        /*設定寬高*/
        height:test-sprite-height(圖片文件名);
        width:test-sprite-width(圖片文件名);

    }    
 

 **注意：關於合併圖片的格式**

貌似只能是PNG格式的

---恢復內容結束---