compass做雪碧图

由于最近没什么时间好好写博文，我把用sass做雪碧图的关键点贴出来方便自己记忆:

config.rb注释

# Set this to the root of your project when deployed:
#配置服务器路径
http_path = "http//:www.baidu.com/"

#配置css sass images javascripts路径
css_dir = "public/stylesheets"
sass_dir = "public/sass"
images_dir = "public/images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
#根据个人偏好选择输出样式 :nested嵌套  :compact紧密 :compressed压缩
# 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

sass写法生产sprites:

@import "compass/utilities/sprites";    // 加载compass sprites模块
$book-spacing:100px;                // 配置所有sprite间距为100px，默认为0px  此句要放在前面才生效
$book-position: 100px;                // 配置所有sprite的位置，默认为0px
$book-base-class:"pfan";
$book-sprite-dimensions:true;       //自动给每个html选择器添加宽度width和高度height
//$book-layout:smart;                  //智能布局的把每张图像放在最合适的地方
//$book-layout:horizontal;                  //水平排列
$book-layout:vertical;                  //纵向排列
//$book-layout:diagonal;                  //对角线布局，最浪费资源

@import "book/*.png";                    // 导入share目录下所有png图片
@include all-book-sprites();                // 输出所有的雪碧图css
//$<map>-<sprite>-spacing: 10px;        // 配置单个sprite间距为10px，默认继承$<map>-spacing的值
//$<map>-<sprite>-position: 0px;        // 配置单个sprite的位置，默认继承$<map>-position的值

compass制作雪碧图参考资料:

　　使用compass自动合并css雪碧图

　　使用Compass生成雪碧图

　　sass技巧：compass制作“雪碧图”