compass與css sprite（雪碧圖）

 

什麼是css sprite？

css sprite，中文叫雪碧圖，也有人喊CSS精靈，就是一種背景拼合的技術，而後經過background-position來顯示雪碧圖中須要顯示的圖像。

MDN相關連接：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites

優勢：1.減小頁面請求數

        2.下降圖片佔用字節

缺點：1.拼圖麻煩

        2.後期維護麻煩

 

爲何使用compass？

最近項目中須要使用到不少小圖片，想用雪碧圖，可是本身拼接圖片，還要計算位置什麼太麻煩了。以前想找在線的雪碧圖合成網站，可是感受都不怎麼好用，而後發現了compass。

compass是一套用於自動建立和維護雪碧圖的強大工具。

應該是官網：http://compass-style.org/

不錯的教程：http://thesassway.com/beginner/getting-started-with-sass-and-compass

 

而後，開始嘗試一下。

 

 

1、安裝ruby和sass

在使用compass機器上請確保有ruby和sass。

1.ruby的下載安裝。 https://www.ruby-lang.org/zh_cn/downloads/

2.安裝sass

gem install sass

網上一開始找到的說這個命令就行了，可是我出現了一下錯誤。

而後找到了一個這樣的解決辦法：

gem sources -a http://rubygems.org/

並不成功，聽說是由於ruby 的gem被和諧了，如今淘寶的ruby工程師架設了rubygems的國內鏡像。

進行一下命令：

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

輸出以下：

*** CURRENT SOURCES ***

https://ruby.taobao.org

成功安裝。

個人版本：

 

2、安裝compass

gem install compass

 

 

3、配置compass項目

compass init

而後你會發現它自動產生了一些文件

接着在根目錄下新建文件夾images/share來放置你想合成的圖片

注意，你的圖片名稱請不要出現空格！

 

4、開始使用

在文件夾sass下新建一個文件爲share.scss，裏面的內容爲：

@charset "UTF-8";

@import "compass/utilities/sprites";  // 加載compass sprites模塊
@import "share/*.png";                // 導入share目錄下全部png圖片

注意，若是你想在裏面使用中文註釋，請記得在第一行加上：@charset 「UTF-8"; 要否則很容易就編碼錯誤

執行命令：

compass watch

以後你只須要盡情地修改你的代碼，每次更改它都會自動查看修改而後從新編譯執行。

這是成功的提示，你會發如今image文件夾裏有一張合成的png圖，命名格式爲share-XXX.PNG，而後在stylesheets文件夾下會新出現了一個名爲share.css的文件。

你打開share.css文件會發現裏面只有三行:

/* line 88, share/*.png */
.share-sprite {
  background-image: url('/images/share-sb24e8ccc59.png');
  background-repeat: no-repeat;
}

/*@include all-share-sprites;*/

這顯然不大對勁，我想要每一個圖片的相對位置啊。

這時候，你須要在share.scss裏多加上一行：

@charset "UTF-8";

@import "compass/utilities/sprites";  // 加載compass sprites模塊
@import "share/*.png";                // 導入share目錄下全部png圖片
@include all-share-sprites;

include的那個東西的名字咱們能夠在開始生成的css的最後一行註釋中看見，是基於引入圖的文件名的。

此次出來的css就會是相似：

/* line 88, share/*.png */
.share-sprite, .share-arrow1, .share-arrow2, .share-arrow3, .share-arrow4, .share-arrow5, .share-arrow6 {
  background-image: url('/images/share-sb24e8ccc59.png');
  background-repeat: no-repeat;
}

/* line 84, ../../../Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.share-arrow1 {
  background-position: 0 0;
}

/* line 84, ../../../Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.share-arrow2 {
  background-position: 0 -25px;
}

這樣，須要用到哪一個圖標就很是簡單了，知足了我最基本的需求~

 

在實際應用中，咱們製做雪碧圖通常都會留必定的間距，在compass裏要作到也很簡單，多加一句話便可。

 

@charset "UTF-8";

$share-spacing: 5px;

@import "compass/utilities/sprites";  // 加載compass sprites模塊
@import "share/*.png";                // 導入share目錄下全部png圖片
@include all-share-sprites;

 

 若是要修改佈局：

@charset "UTF-8";

$share-layout: 'smart';

@import "compass/utilities/sprites";  // 加載compass sprites模塊
@import "share/*.png";                // 導入share目錄下全部png圖片
@include all-share-sprites;

注意：目前控制間距和「smart」佈局不能同時使用。同時出現的話，只會顯示smart佈局，間距並不會有改變。

 

 

另外，使用compass你還能夠控制生成圖片的圖標排列方式，控制圖標間的間距等。

 

中文教程參考：

【Sass中級】使用Sass和Compass製做雪碧圖

使用compass自動合併css雪碧圖(css sprite)