Sass和Compass制作雪碧图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.安装好了sass与compass之后设置一个配置文件

2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹

3.@import命令引用。Compass看到@import指令的参数为*.png时，它会假定将这个目录下的所有.png图片制作成一张雪碧图

你也可以通过一定的规则让它按照自己需要的图片以及排版来生成相应的雪碧图，设置如下：

第一个框框里面的设置是把所有color文件夹下的图片合成一张大图，同事会编译出对应的css文件。

第二个框框里面的设置是把color文件夹下的图片按需合成一张大图。

4.执行命令后compass watch 开始生成雪碧图

结果如下：

根据自己的需要把对应的css拿过去使用。

线上效果：

http://dongxuec3xr.e-horse.cn/

参考链接http://www.w3cplus.com/preprocessor/intermediate/spriting-with-sass-and-compass.html