码迷,mamicode.com
首页 > 其他好文 > 详细

compass做雪碧图

时间:2015-04-13 00:21:00      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

由于最近没什么时间好好写博文,我把用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制作“雪碧图”  

compass做雪碧图

标签:

原文地址:http://www.cnblogs.com/pingfan1990/p/4421039.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!