Compass sprite功能詳解

Compass sprite簡介

sprite（雪碧圖），是指將多張icon小圖標拼湊成一張大圖，以減小http請求的技術，實現方法大致就是先再PS裏面把多張圖拼一下，而後再在css中用background-position進行定位，顯而易見這種方法很是的繁瑣，PS的過程很是麻煩並且寫css的過程也很煩人，尤爲是須要修改的時候簡直痛不欲生，而Compass將這一切都自動化，大大減小了咱們的工做.

PS:本文假設您已經安裝了SASS和compass

新建個sprite.ssass

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

@import 「icons/*.png」： 引入s目錄下的全部png圖片，s是目錄名，至關於命名空間，在compass稱之爲 map，很是重要。

@include all-icons-sprites：生成sprite css代碼

那麼這個時候您的s目錄下的全部Png文件都已經被合併成了一張雪碧圖。假設個人icons目錄下的圖片以下:

來看一下sprite.css的部份內容

.icons-sprite, .icons-bus, .icons-car, .icons-edit-portrait, .icons-exifdown, .icons-eye, .icons-home, .icons-hot, .icons-jinghua, .icons-leftyinhao, .icons-level, .icons-liuyan, .icons-more, .icons-person, .icons-phone, .icons-quguo, .icons-rightyinhao, .icons-sanjiao, .icons-search, .icons-searchtxt, .icons-tel, .icons-video, .icons-weizhi, .icons-write, .icons-yjzan, .icons-zan, .icons-zhuti {
  background-image: url('/statics/images/icons-sa8cd0a64a6.png');
  background-repeat: no-repeat;
}

.icons-bus {
  background-position: 0 0;
}


.icons-car {
  background-position: 0 -44px;
}


.icons-edit-portrait {
  background-position: 0 -88px;
}

能夠看到Compass已經自動幫咱們算好了position，可是其實這遠遠不夠，實際運用中咱們還會遇到一些麻煩。例如說我想要實現以下效果

理想中的解決方案是

<p class='homelink'>官網</p>

.homelink{
    background:url(homelink.png) no-repeat scroll left center;
    padding-left:30px;
}

可若是照以前compass給出的功能咱們只能

<p><span classs='icons-homelink'></span>官網</p>

並且最後的結果是這樣的

能夠看到不但HTML多出了冗餘，並且實現效果尚未達到咱們的預期、

解決方案

咱們能夠不引入@include all-s-sprites這一句，不讓Compass自動的幫咱們生成類名，而是使用Compass中的函數，手動的生成樣式。首先咱們須要定義一個變量來對應咱們的sprite圖。

$sprite: sprite-map("icons/*.png", $spacing: 50px);

sprite-map是Compass的內置函數，$spacing是指生成的雪碧圖中每一個元素的間隔。

使用方法:

$left:0;
$top:16px;
.homelink{
    bakcground:sprite($sprite,homelink,$left,$top) no-repeat;
    padding-left:30px;
}

這裏的$left和$top就是指你須要在Compass生成後的position裏面增長的偏移量。

編譯後生成的代碼:

.homelink{
    background: url('/statics/images/icons-s82c207cac2.png') 0 -319px no-repeat;
    padding-left: 30px;
}

若是將$top的值修改成0，那麼將生成以下代碼:

.homelink{
    background: url('/statics/images/icons-s82c207cac2.png') 0 -335px no-repeat;
    padding-left: 30px;
}

嗯 如今就能夠光明正大的偷懶不用本身作雪碧圖了