compass sprite

1、compass init 初始化一个compass项目，并创建一个images文件夹用来存放合成的sprite图

2、将切好的小图放到images文件夹中

3、在sass文件夹中新建一个test.scss的文件并写入

@import "test/*.png";       //导入小图片
@include all-test-sprites;   // 这是 compass 定义好的 mixin，一次全部生成 icons 这个文件夹里的所有图片的雪碧图

4、sass编译后会输出如下css

.test-sprite, .test-adv_food, .test-adv_taste, .test-adv_traffic, .test-adv_wifi, .test-hot_tags, .test-icon_100_31, .test-icon_hook, .test-icon_pos, .test-icon_wifi, .test-product_score { background-image: url('/images/test-s61f860e6f4.png'); background-repeat: no-repeat; }

.test-adv_food { background-position: 0 0; }

.test-adv_taste { background-position: 0 -48px; }

.test-adv_traffic { background-position: 0 -95px; }

.test-adv_wifi { background-position: 0 -138px; }

.test-hot_tags { background-position: 0 -186px; }

.test-icon_100_31 { background-position: 0 -208px; }

.test-icon_hook { background-position: 0 -239px; }

.test-icon_pos { background-position: 0 -255px; }

.test-icon_wifi { background-position: 0 -271px; }

.test-product_score { background-position: 0 -317px; }

其它配置：

1、输出布局，默认输出的雪碧图是按各个图片，垂直排列的。Compass 提供了： Vertical , Horizontal , Diagonal , Smart ，默认以 Vertical 输出。

$test-layout: smart; // {文件夹名称}-layout

2、控制间距，为每个图片加入间距，此处指定为10px

$test-spacing:10px

3、自动获取当前图片的尺寸

$test-sprite-dimensions:true;  //默认是false

4、手动指定类名

@import "test/*.png";
.wifi-test{                 //指定图片为icon_wifi的类名
    @include test-sprite(icon_wifi);
}

编译后生成的css代码

.test-sprite, .wifi-test { background-image: url('/images/test-s61f860e6f4.png'); background-repeat: no-repeat; }

.wifi-test { background-position: 0 -271px; }

转载于:https://my.oschina.net/u/3147332/blog/807100