码迷,mamicode.com
首页 > 其他好文 > 详细

Sass和Compass制作雪碧图

时间:2015-03-19 12:57:48      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

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

Sass和Compass制作雪碧图

标签:

原文地址:http://www.cnblogs.com/ruoqiang/p/4349945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!