如何在 sass 中使用 compass sprite

Question

环境配置

安装 ruby，sass，compass 环境

为了在项目中正确使用 compass sprite，还需要替换以下3个文件 [download]：

• sprite_methods.rb（解决旧的sprite图片无法删除的问题）
• layout_methods.rb（保证图片合成时以文件名排序为准）
• palette.rb（优先以调色板信息大小为准，决定合成 png8 or png24 格式图片）

替换源文件路径为 ruby\gems\1.8\gems\chunky_png-1.2.8\lib\chunky_png 以及 ruby\gems\1.8\gems\compass-0.12.2\lib\compass\sass_extensions\sprites

文件目录

样式目录结构如下：

style/
  |-- autosprite          存放所有sprite源图片  
        |-- icon          存放png24源图片
        |-- icon-ie       存放png8源图片
        |-- xxx
  |-- css                 存放编译后生成的css文件  
  |-- img                 存放compass sprite目标图片以及项目图片  
  |-- scss                存放项目scss文件  
  |-- config.rb           compass配置文件  
  |-- watch.bat/watch.sh  监听编译脚本  

如上 autosprite 中的 icon 文件目录定义仅供示范，若项目要求兼容 IE6，则需要对应 icon png24 图片文件夹和 icon-ie png8 图片文件夹分别生成对应的 png24 和 png8 图片（兼容IE6），文件夹分类依具体项目而定。

其中 config.rb 中需要定义如下对应的路径，其中 image_dir 为必要设置，generated_images_dir 为非必要设置。

• 若没有设置generated_image_dir，则最终生成的sprite图片目标路径为image_dir。
• 若设置了generated_image_dir，则最终生成的sprite图片目标路径为generated_image_dir，但compass sprite函数输出图片引用路径仍指向image_dir，需要通过另外的sprite函数处理才能获得正确路径，文后会具体说明。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
image_dir = "autosprite"        #sprite源图片路径 
generated_images_dir = "img"    #sprite目标图片路径

语法

使用compass sprite需要在文件头引入 @import "compass/utilities/sprites/base";

合并方式

自动合并

@import "foldername/*.png"; /* 此处放空注释以避免前面的注释起始字符会将后面的代码当成注释 */  
@include all-foldername-sprites;

生成 css 代码

.foldername-sprite,
.foldername-delete,
.foldername-edit,
.foldername-new,
.foldername-save {background: url('/images/foldername-s05fe546dfdsf.png') no-repeat;} /* 指向image_dir */

.foldername-delete{background-position:0 0;}
.foldername-edit{background-position:0 -32px;}
.foldername-new{background-position:0 -64px;}
.foldername-save{background-position:0 -96px;}

手动合并

$icon : sprite-map("foldername/*.png");  /* 生成sprite图片并在css中引入background url路径 */
$icon-url : sprite-url($icon);   /* 由于上一步引入url指向image_dir，因此需要手动修改路径。此步骤获取到上一步url */
$icon-sprite : sprite-path($icon); /* 获取文件名 */
.w-icon{background: url("../img/" + $icon-sprite);} /* 手动修改获取正确的background url */
@include sprites($icon,sprite-names($icon)); /* 输出源图片background-position */

生成css代码

.w-icon {background: url('../img/foldername-s05fe546dfdsf.png') no-repeat;}
.foldername-delete{background-position:0 0;}
.foldername-edit{background-position:0 -32px;}
.foldername-new{background-position:0 -64px;}
.foldername-save{background-position:0 -96px;}

对比以上两种方法，手动合并方法更利于css代码管理，同时可以减少代码量（图片引入绑定在基类w-icon上，特定的图标类只控制对应的background-position），因此目前项目中采用手动合并的方式来实现。

常用的配置参数和 Mixin

自动合并

/* 以下为全局控制变量 */
$foldername-repeat: no-repeat; 
$foldername-position: 0%;
$foldername-layout: vertical; /* 排列方式：horizontal-水平 or vertical-垂直 or diagonal-对角线 or smart-智能 */
$foldername-sprite-dimensions: false; /* 生成的foldername-xxx类是否包含width和height属性 */  
$foldername-sprite-base-class: ".spritename";
$foldername-spacing: 0; /* 源图片之间的间距 */
$foldername-clean-up: true; /* 生成新的sprite图时是否删除旧图 */
$disable-magic-sprite-selectors: false;
/* 输出css中是否包含hover、target、active状态，若为true，对于图add.png和add_hover.png则会输出
.foldername-add:hover, .foldername-add.add_hover, .foldername-add.add-hover { background-position: 0 -20px; }，
建议设为true，然后对状态类样式进行重写，可减少冗余代码量 */
$sprite-selectors: hover, target, active !default; /* 定义要用到的状态，默认值为hover, target, active */

/* 以下为单图控制变量 */
$foldername-imgname-spacing: 0;
$foldername-imgname-repeat: no-repeat;
$foldername-imgname-position: 100%;

手动合并

$icons: sprite-map("foldername/*.png", $layout:vertical, $spacing: 0, $foldername-imgname-spacing: 0, $repeat: no-repeat, $position: 0%);
@include sprites($icons,sprite-names($icons),[$base-class : false],[$dimensions : false]); 
/* $dimensions控制是否输出width和height，对于所有大小不一的图片sprite非常有用 */
/* 手动合成时，当$layout:horizontal时
未设定$spacing时，$foldername-imgname-spacing无效；
设定$spacing时，$foldername-imgname-spacing大于$spacing的两倍时，会报“图片背景宽度不够”的错误 */

@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0)
.test{@include sprite-background-position($icons, "add") /* 输出add图标的background-position赋给.test类，在样式重写时非常有用 */

以上两种合成方式，当 $layout:diagonal 或 smart 时，对 spacing 的设置不会影响合成图片的位置，却会影响css中的background-position的数值，所以对角线或智能合成的时候，不要设置 spacing

对 hover, target, active 状态的说明

1. 图标命名使用icon-xxx_hover：会自动输出icon-xxx:hover样式，但是同时会生成冗余样式（.icon-xxx.xxx_hover, .icon-xxx.xxx-hover），因此弃用！
2. 图标命名使用icon-xxx-hover：不会输出icon-xxx:hover or icon-xxx-hover样式，需要手动添加 icon-xxx:hover{@include sprite-background-position($icon,"icon-xxx-hover");}

参考资料

compass 官网内容

• http://compass-style.org/help/tutorials/spriting/
• http://compass-style.org/reference/compass/helpers/sprites/
• http://compass-style.org/reference/compass/utilities/sprites/base/

中文贴

• 【Sass中级】使用Sass和Compass制作雪碧图 （文章图片都挂掉，需要查看的话将图片原url中cdn.w3cplus.com换为www.w3cplus.com单独访问即可）
• 【Sass中级】使用Compass生成雪碧图

compass retina sprite 扩展资料

• github Repo - Retina-Sprites-for-Compass
• Sass Mixins——支持Retina的Icons Sprite

retina sprite 原理为准备另外一份大图，使用 compass sprite 拼图同时利用 background-size 属性缩小一倍

经验之谈

windows下如果遇到error style/scss/global.scss (Line 7 of style/scss/_mixin.scss: Invalid GBK character "\xE6")这样的错误，可参考如下解决方法：

• 把 _minxin.scss 文件使用utf-8另存为，重新保存一遍;
• 在 cmd shell 里执行 chcp 65001 。[原因]，[出处]，[扩展阅读]
• 在所有的 .scss 文件的头部加入一行代码 @charset "utf-8"; [see more]

compass 编译报错 Invalid GB2312 character "\xE9" 解决办法：

• 原因：官方说法 “Compass doesn't expose all of its options through the CLI, which this task makes use of. If you need an option not mentioned below you can either specify a path to a config.rb file in the config option or embed it directly into the raw option. Options defined in your Gruntfile will override those specified in your config.rb or raw property. config and raw are mutually exclusive. ”
• 解决办法：在config.rb compass的配置文件中加上：

# set the css file encoding
Encoding.default_external = "utf-8"

目前 compass1.0.1 版本向后兼容不好（会有编码报错 & 图片生成路径不对），因此需要回退到0.12.2版本，执行以下命令后，替换上文中的3个rb文件【2014.11.04】[ref]

gem uninstall sass
gem uninstall compass 
gem install sass -v 3.2.12
gem install compass --version 0.12.2

注意事项

compass sprite 仅支持 png 图片

文件名不能以数字开头

由于PNG8图片仅支持256色，过于丰富的图片不适合合并为png8格式，因此在存储png8源图片时尽量在不降低图片质量的前提下选择较少的颜色值，若确实无法满足条件，可以再生成sprite图后手动转换成png8格式（不自动化，此方法尽量不使用）

所有icon必须是非交错的png，否则会报没有unpack属性的错误