让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