sass制作雪碧图

1、配置文件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为生成雪碧图的地址

2、在对应的sass文件中

//生成雪碧图

$images-spacing:

$images-clean-up: true

// 加载compass sprites模块

@import "compass/utilities/sprites"

// 导入icon目录下所有png图片

@import "icon/*.png"

// 输出所有的雪碧图css

@include all-icon-sprites

直接设定images_dir下的文件夹所有的png图片

3、单个sass样式的

.hex-iconAdd

  @include icon-sprite("add_w")

add_w是图片名， icon-sprite这单词不加s

4、生成的css