有了sass和compass,前端真的是省了好多事,不少均可以交给compass进行自动化,好比说生成雪碧图等。如今,讲解一下如何使用compass生成雪碧图。demo地址css
rubyhtml
sass(依赖sass)前端
compasssass
$ compass init
生成目录结构以下所示:ruby
config.rb(compass配置文件)bash
sassapp
stylesheetsurl
在项目根目录下新建images目录spa
在新建的images目录下新建share目录用于存储png图片code
在上一步新建的share目录下存储png图片(若是没有png图片能够参考最下面的附件图片)
// 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下生成雪碧图,以下图所示
<ul> <li class="menu-item app"></li> <li class="menu-item extend"></li> <li class="menu-item focus"></li> </ul>
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; }