為了減少網頁中的請求數，我們通常會將很多icon拼接到一個大的圖片中，通過background和background-position來控制元素的顯示。但是，拼接雪碧圖以及后續的具體元素在雪碧圖中位置的確定都是很麻煩的，精確也不準確。
今天，就來介紹一種簡便的方法。使用此方法，當拼接工作量大時，能夠很大程度地減少前端的工作；而且不會出現像素上的差別，十分準確。
1.環境配置
- ruby
- sass
gem install sass
但是往往會報：
gem 在國內的鏡像不能用
Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - Errno::E...
所以我們來使用淘寶的鏡像，執行以下操作：
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
按照步驟進行就行，之后再進行如下命令：
sudo gem install sass
- compass
sudo gem install compass
- 查看上面的ruby,sass,compass是否安裝正確，如果正確，就能看到對應的版本狀態
ruby -v
sass -v
compass -v
2.compass項目
- 在自己新建的項目中
compass init
會在命令行輸出以下內容，表示初始化成功：
directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
write stylesheets/ie.css
write stylesheets/print.css
write stylesheets/screen.css
Congratulations! Your compass project has been created.
也可以直接在一個目錄下，compass create compass-test
查看compass項目配置文件config.rb
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true // 使用相對目錄
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false //關閉行注釋
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
- 準備要拼接的icon
根據config.rb中的設置，我們需要將圖片放在images文件夾下
所以，我們先在項目根目錄下新建一個images文件夾，
比如我們現在項目?多個模塊，每個模塊需要對應一個雪碧圖，
那么我們在images中新建多個文件夾保存原始的圖片；
-
現在假設我們有一個share模塊，然后share模塊有2張需要合并的背景圖
pic1.png 針對share模塊，我們在sass文件夾下新建一個叫share.scss，內容為：
@import "compass/utilities/sprites"; // 加載compass sprites模塊
@import "share/*.png"; // 導入share目錄下所有png圖片
@include all-share-sprites; // 輸出所有的雪碧圖css
- 在根目錄下，執行
compass compile
如果命令執行成功，我們可以在images文件夾下生成一個以share開頭的文件，比如我這的是：share-s0876535d58.png。
pic2.png
同時，我們在stylesheets文件夾下，看到新生成的share.css文件,內容如下：
/* line 56, share/*.png */
.share-sprite, .share-github, .share-weibo {
background-image: url('/images/share-s0876535d58.png');
background-repeat: no-repeat;
}
/* line 84, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.share-github {
background-position: 0 0;
}
/* line 84, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.share-weibo {
background-position: 0 -23px;
}
