让DodoMonster来教你如何使用compass自动合并生成css雪碧图(css sprite)

工具(如果已安装好ruby、sass和compass可忽略)

• ruby

安装下载地址：请点击此处下载

记得勾上那两个勾，把ruby添加到系统变量

• sass
  打开命令行 -> 输入命令gem install sass -> 回车 -> 耐心等待

• compass
  打开命令行 -> 输入命令gem install compass -> 回车 -> 耐心等待

• 检验以上三者是否安装成功，命令行下输入：

  1. ruby -v

  2. sass -v

  3. compass -v

本文中代码运行环境为：ruby:2.3.3, sass: 3.4.22, compass: 1.0.3, 测试时请确认sass版本不低于3.4.6，compass版本不低于1.0.1。

配置初始化compass

• 建目录(test-compass) -> 进入目录 -> 输入命令 compass init -> 自动生成初始配置目录和文件

注意不能从根目录开始目录名不能有中文，否则ruby编译会报Encoding::CompatibilityError on line ["87"] of D: incompatible character encodings: GBK and UTF-8 的cuo'wu

• config.rb 文件中添加下面这两行
  relative_assets = true #使用相对目录
line_comments = false #关闭行注释

• 在test-compass目录下新建images(这个目录名必须固定)目录，内含test、magic、settiing三个文件夹，总目录结构如图：

compass sprite配置

1. 相关语法

$<map>-<property>: setting;                // 配置所有sprite
$<map>-<sprite>-<property>: setting;    // 配置单个sprite

• <map>: 对应图标存放的文件夹名称，如上面例子中的：test和magic

• <sprite>: 对应单个图标的名称，如上面例子中的: chuyunhu, chuyunhu_active等

1. 配置sprite间距

$<map>-spacing: 10px;                // 配置所有sprite间距为10px，默认为0px
$<map>-<sprite>-spacing: 10px;        // 配置单个sprite间距为10px，默认继承$<map>-spacing的值

1. 配置sprite重复性

$<map>-repeat: no-repeat/repeat-x;        // 配置所有sprite的重复性，默认为no-repeat
$<map>-<sprite>-repeat: no-repeat/repeat-x;// 配置单个sprite的重复性，默认继承$<map>-repeat的值

1. 配置sprite的位置

$<map>-position: 0px;                // 配置所有sprite的位置，默认为0px
$<map>-<sprite>-position: 0px;        // 配置单个sprite的位置，默认继承$<map>-position的值

1. 配置sprite的布局方式

$<map>-layout: vertical/horizontal/diagonal/smart;        // 默认布局方式为vertical

1. 清除过期的sprite
   compass会自动的生成一个基础类来应用公用的样式(如background-image)，默认的类名为$<map>-sprite，如上面例子中的：.test-sprite,.magic-sprite就是基础类，当然compass也提供了自定义这个类名的选项：

       $<map>-sprite-base-class: ".class-name";
   

2. 魔术精灵选择器开关
   默认情况下compass是关闭这个功能的，也就是说compass默认不会将以_hover, _active等名字结尾的图片自动输出对应的:hover, :active等伪类样式。当然如果想这样的话，也可以禁用它：

       $disable-magic-sprite-selectors: true;
   

3. 设置sprite尺寸
   合并雪碧图时，很多时候图片的尺寸都不一样，那么在使用时我们如何给每个sprite设置尺寸呢？compass有提供自动设置每个sprite尺寸的配置，默认是关闭的，我们只需手动启用即可：

       $setting-sprite-dimensions: true;    // 启用自动设置sprite尺寸，默认值为false
   

   这时输出的样式中会自动加上图片的尺寸。
   当然，如果只对某个sprite单独设置的话，compass也提供了这个功能。语法如下:

   $<map>-sprite-width($name);     // $name为合并前的图片名称
   $<map>-sprite-height($name);
   
   如：
   
   .test-special {
       @include setting-sprite(compass);
       width: setting-sprite-width(compass);
       height: setting-sprite-height(compass);
   }
   

开始合并雪碧图

输出所有雪碧图

• 在sass目录下新建test.scss(名字可随意起，但是必须与下面代码中的all-test-sprites中的test对应)文件,并输入以下代码：

@charset "utf-8";     
/*sass文件编译时如果文件内含中文哪怕是注释都必须添加这一行否则会报invalid gbk character "\xE5"的错误*/
@import "compass/utilities/sprites";    /* 加载compass sprites模块*/
@import "test/*.png";                    /* 导入test目录下所有png图片*/
@include all-**test**-sprites;                /* 输出所有的雪碧图css*/

• 在test-compass目录下运行compass compile 进行编译后,images目录下会生成test-*.png目录下，这样雪碧图就生成了，而stylesheets目录下则生成了test.css里面有对应的图片位置background-position，就再也不需要用ps一个个计算位置，然后拼接在一起。棒棒哒！！！

调用单个雪碧图

• 在sass目录下新建test-single.scss，写入以下代码：

@charset "utf-8";  
@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "test/*.png";                    // 导入share目录下所有png图片
.chuyunhu {
    @include test-sprites(chuyunhu);//chuyunhu为图片名
}

• 在test-compass目录下运行 compass compile 进行编译，注意：使用 compass compile 只编译发生变动的文件，如果你要重新编译未变动的文件，需要使用--force参数 compass compile --force

• 编译后的css如下：

@charset "UTF-8";
/* 加载compass sprites模块*/
.test-sprite, .chuyunhu .test-chuyunhu {
  background-image: url('../images/test-sb9515b4960.png');
  background-repeat: no-repeat;
}

/* 导入test目录下所有png图片*/
.chuyunhu .test-chuyunhu {
  background-position: 0 0;
}
.chuyunhu .test-chuyunhu:active, .chuyunhu .test-chuyunhu.chuyunhu-active {
  background-position: 0 -64px;
}

利用魔术精灵选择器智能输出

有的时候我们的图标会有多种状态，比如hover, active, focus, target等。利用compass的魔术精灵选择器我们就可以智能的合并各状态的图标，并输出对应的css。使用时，我们需要将图标按照一定的规则命名。例如：

chuyunhu.png

chuyunhu_active.png

chuyunhu_hover.png

• 在sass目录下新建magic.scss，写入以下代码：

@import "compass/utilities/sprites";
@import "magic/*.png"; //导入magic目录下的所有png图片
@include all-magic-sprites; //magic与scss文件名对应

• 在test-compass目录下运行 compass compile --force 进行编译即可

简单的github示例代码：https://github.com/DodoMonste...

鸣谢

使用compass自动合并css雪碧图(css sprite)
Compass Sprite