什么是Sprites? 请参考W3C CSS Image Sprites 范例

简单来说，就是使用一张大图片，利用位移方式显示想要的图案 好处就是减少HTTP Request次数(一张图片就是发起一次HTTP Request)

网路上有现成的工具可以使用 CSS Sprites generator 这个工具非常方便，可以自动帮你产生图档和CSS文件

先前介绍的SCSS Framework - Compass，也提供的好用的方法可以使用 Compass Sprites Document

简单说明使用方式

1.config.rb设定档内 => images_dir 指定位置内新增一资料夹 example => arrows 2.将要合并的图档arrows资料夹内

  • images_dir/arrows/up.png
  • images_dir/arrows/down.png
  • images_dir/arrows/left.png
  • images_dir/arrows/right.png

3.scss档案输入

  • @import "arrows/*.png";
  • @include all-arrows-sprites; => @include all-[folder-name]-sprites

4.对应的CSS应该会产生以下内容

.arrows-sprite, .arrows-down, .arrows-left, .arrows-right, .arrows-up {   background: url('/images/arrows-sef3b99158d.png') no-repeat; }

.arrows-down {   background-position: 0 -32px; }

.arrows-left {   background-position: 0 -96px; }

.arrows-right {   background-position: 0 -64px; }

.arrows-up {   background-position: 0 0; }

可能遇到的问题

1.路径问题 => windows环境下，由于正(\)反(/)斜线问题，导致路径问题

解决方式: compass watch path => path使用linux路径表示

example : d:\www\project1 => d:/www/project1

2.CSS样式图片路径不准确 .arrows-sprite, .arrows-down, .arrows-left, .arrows-right, .arrows-up { background: url('/images/arrows-sef3b99158d.png') no-repeat; }

解决方式: config.rg 加入参数 => relative_assets = "true"

在HTML使用方式 <div class="arrows-down"></div>  

相关文章