為了減少網(wǎng)頁中的請求數(shù)，我們通常會將很多icon拼接到一個大的圖片中，通過background和background-position來控制元素的顯示。但是，拼接雪碧圖以及后續(xù)的具體元素在雪碧圖中位置的確定都是很麻煩的，精確也不準(zhǔn)確。
今天，就來介紹一種簡便的方法。使用此方法，當(dāng)拼接工作量大時，能夠很大程度地減少前端的工作；而且不會出現(xiàn)像素上的差別，十分準(zhǔn)確。
1.環(huán)境配置
- ruby
- sass
gem install sass
但是往往會報：
gem 在國內(nèi)的鏡像不能用
Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - Errno::E...
所以我們來使用淘寶的鏡像，執(zhí)行以下操作：
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
按照步驟進(jìn)行就行，之后再進(jìn)行如下命令：
sudo gem install sass
- compass
sudo gem install compass
- 查看上面的ruby,sass,compass是否安裝正確，如果正確，就能看到對應(yīng)的版本狀態(tài)
ruby -v
sass -v
compass -v
2.compass項目
- 在自己新建的項目中
compass init
會在命令行輸出以下內(nèi)容，表示初始化成功：
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 //關(guān)閉行注釋
# 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
- 準(zhǔn)備要拼接的icon
根據(jù)config.rb中的設(shè)置，我們需要將圖片放在images文件夾下
所以，我們先在項目根目錄下新建一個images文件夾，
比如我們現(xiàn)在項目?多個模塊，每個模塊需要對應(yīng)一個雪碧圖，
那么我們在images中新建多個文件夾保存原始的圖片；
-
現(xiàn)在假設(shè)我們有一個share模塊，然后share模塊有2張需要合并的背景圖
pic1.png 針對share模塊，我們在sass文件夾下新建一個叫share.scss，內(nèi)容為：
@import "compass/utilities/sprites"; // 加載compass sprites模塊
@import "share/*.png"; // 導(dǎo)入share目錄下所有png圖片
@include all-share-sprites; // 輸出所有的雪碧圖css
- 在根目錄下，執(zhí)行
compass compile
如果命令執(zhí)行成功，我們可以在images文件夾下生成一個以share開頭的文件，比如我這的是：share-s0876535d58.png。
pic2.png
同時，我們在stylesheets文件夾下，看到新生成的share.css文件,內(nèi)容如下：
/* 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;
}
