使用compass自動拼css sprite，compasssprite

使用compass自動拼css sprite，compasssprite
使用compass自動拼css sprite

css sprite （css 雪碧）又叫css精靈，是一種圖片拼合技術。多用在表徵圖上，把幾個表徵圖拼成一個圖片，頁面載入的時候只需要load拼好的圖片，然後使用background-position配合width、height來顯示不同的表徵圖。這樣做可以減少頁面請求數。但是，想想把一個個表徵圖從psd上扣下來，合到一個圖上，然後還要慢慢算background-position，這也真是醉了，而且後期如果改了表徵圖，又要重新拼一次，拼完再算一次background-position，真是坑大了。

對於這種耗時的體力活，都應該自動化。本文就介紹使用compass來自動拼css sprite。

安裝compass

這裡安裝和配置可以參考我另外一篇文章，SASS用法介紹，這裡就不多做介紹了。compass經常配合sass使用，推薦平常用sass，提高寫css的效率。

合成css sprite

首先我們對config.rb檔案進行一些改動：

# Get the directory that this configuration file exists indir = File.dirname(__FILE__)#Compass configurationsass_path = dircss_path = File.join(dir, "..", "css")images_dir = "../img"environment = :production # :development # :productionoutput_style = :compact # :expanded # :compressed

這裡主要是加了image_dir這一項。
然後我們添加一個sass檔案tmp.scss：

@import "compass/utilities/sprites";    @import "tmp/*.png";                    @include all-tmp-sprites; 

這裡第一行是載入compass的sprites模組。
第二行表示把tmp目錄下所有的png檔案拼起來，這裡的tmp是一個相對目錄，如果沒有配置sprite_load_path這一項的話，預設就會使用我們剛才加的images_dir這一項，實際上，如果連這一項也沒配置也不怕，預設叫images。這裡要特別說明一下，以我們現在的設定檔來說，需要一個tmp目錄，放到img目錄下，tmp目錄裡面放的就是我們需要拼接的圖片。
第三行的話，意思是輸出所有sprite的css，也就是計算好的background-position。這裡中間的tmp需要和上面一樣，如何修改需要查閱文檔。

之後調用compass compile進行編譯，發現img目錄下出現了一個拼接後的圖片tmp-sxxxxxxxxxx.png，然後css目錄下產生了對應的tmp.css檔案。

圖片命名最佳化

是不是覺得自動產生圖片爽爽的，但是帶了一大串hash數字在圖片名中很不舒服。下面我們就來處理這段數字。

compass提供了一些鉤子函數，compass裡面叫callback，這裡我們用到一個叫on_sprite_saved的鉤子。在config.rb檔案中添加下面這段，注意如果是用compass watch來自動檢測改動的話，需要中斷，重新運行compass watch。

on_sprite_saved do |filename|  if File.exists?(filename)    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')  endend

重新run之後，發現多了一個tmp.png檔案，而原來帶hash的檔案也還在，其實因為用的是FileUtils.cp函數,所以做的是copy，如果改成FileUtils.mv則不會有帶hash值得檔案。
然後再看一下tmp.css檔案，發現裡面還是用的是帶hash的那個檔案。
這裡還要用另外一個鉤子：

on_stylesheet_saved do |filename|  if File.exists?(filename)    css = File.read filename    File.open(filename, 'w+') do |buffer|      buffer << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')    end  endend

ok，大功告成。

完整的config.rb:

# Get the directory that this configuration file exists indir = File.dirname(__FILE__)#Compass configurationsass_path = dircss_path = File.join(dir, "..", "css")images_dir = "../img"environment = :production # :development # :productionoutput_style = :compact # :expanded # :compressedon_sprite_saved do |filename|  if File.exists?(filename)    # FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')    FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')  endendon_stylesheet_saved do |filename|  if File.exists?(filename)    css = File.read filename    File.open(filename, 'w+') do |buffer|      buffer << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')    end  endend

compass還有很多配置選項，可以參考官網傳送門，或者這篇文章。

參考

http://riny.net/2014/compass-sprite/
http://segmentfault.com/q/1010000000308179
http://compass-style.org/help/documentation/configuration-reference/