使用compass生成雪碧图sprite

更新于 2016-09-23  约 4 分钟

有了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;
}

附件

app
extend
focus

阅读 2.4k更新于 2016-09-23

推荐阅读
前端分享
用户专栏

前端分享

1 人关注
37 篇文章
专栏主页
目录