使用compass生成雪碧图sprite

有了sass和compass，前端真的是省了好多事，很多都可以交给compass进行自动化，比如说生成雪碧图等。现在，讲解一下如何使用compass生成雪碧图。demo地址

环境

• ruby

• sass(依赖sass)

• compass

雪碧图生成 & 使用

项目初始化

$ compass init

生成目录结构如下所示:

• config.rb（compass配置文件）

• sass

• stylesheets

compass生成sprite

• 在项目根目录下新建images目录

• 在新建的images目录下新建share目录用于存储png图片

• 在上一步新建的share目录下存储png图片(如果没有png图片可以参考最下面的附件图片)

sass代码

// scss/sprite.scss
@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "share/*.png";                    // 导入share目录下所有png图片
@include all-share-sprites;                // 输出所有的雪碧图css

# 在项目根目录下
$ compass watch sass/sprite.scss
# 运行以上命令，在目录images下生成雪碧图，如下图所示

使用雪碧图

html结构

<ul>
  <li class="menu-item app"></li>
  <li class="menu-item extend"></li>
  <li class="menu-item focus"></li>
</ul>

css结构

ul {
  padding: 0;
  background: #f00;
}
ul li {
  list-style: none;
  display: inline-block;
  width: 22px;
  height: 22px;
}
.menu-item {
    background: url(http://7fvgk8.com1.z0.glb.clouddn.com/sprite.png) no-repeat;
    background-size: 22px auto;
}
.app {
    background-position: 0 0;
}
.extend {
    background-position: 0 -22px;
}
.focus {
    background-position: 0 -44px;
}

附件