sass製做雪碧圖

一、配置文件config.rb

http_path = "../../../"
css_dir = "Content/css"
sass_dir = "Content/sass"
images_dir = "Content/images"
#css_dir = "Components/Table"
#sass_dir = "Components/Table"
#images_dir = "Components/Table"
javascripts_dir = "Scripts"

http_path + images_dir爲生成雪碧圖的地址

二、在對應的sass文件中

//生成雪碧圖
$images-spacing: 10
$images-clean-up: true
// 加載compass sprites模塊
@import "compass/utilities/sprites"
// 導入icon目錄下全部png圖片
@import "icon/*.png"
// 輸出全部的雪碧圖css
@include all-icon-sprites

直接設定images_dir下的文件夾全部的png圖片

三、單個sass樣式的

.hex-iconAdd
  @include icon-sprite("add_w")

add_w是圖片名， icon-sprite這單詞不加s

四、生成的css