SmartSprites 智能批量合并 CSS 雪碧图

 

做前端的稍微有点经验的都知道 可以通过合并小图片 来减少请求数,

最早可能都是通过 fw、ps 等工具来手动合并,

这种方式的缺点就不吐槽了,效率低,可维护性差 等等 ....

一些很厉害的人,往往会开发出很厉害的程序,来解决重复性的劳动,

1.  https://github.com/iazrael/ispriter

2.  http://www.uini.net/?p=870

3.  http://csssprites.org/

4.  more ...

这些工具,我都稍微了解过,但最后觉得比较好使(适合自己)的是 SmartSprites(http://csssprites.org/)

个人觉得它的好处:

1. 语法简易,控制灵活;

/** sprite: icon-14; sprite-image: url('../images/components/icon-14.png'); */

 首先定义 一个合并图片,定义内容包含,合并标识,合并图片生成地址,还有更多参数,比如:纵向还是横向合并,图片名字是否自动生成等 ....

.icon-add-14
{
    background-image:url('@{bg-components-srpite-url}icon-add-14.png'); /** sprite-ref: icon-14;*/
}
.icon-batch-delete-14
{
    background-image:url('@{bg-components-srpite-url}icon-batch-delete-14.png'); /** sprite-ref: icon-14;*/
}

   使用时只需要在正常 gackgrund-image 后面加上 特定的注释语法,sprite-ref 指向开始的 sprite 定义,标识那几个小图合并到同一张图上,

   这个也有更多的参数,比如:position 方式,margin 值 等等 .....

 

   这样看起来是不是很简单明了,完全不破坏你原有的写法,只是增加注释而已!

    

2. 基于 cmd 命令,任何程序都可以调用 

smartsprites.cmd --root-dir-path xxx  --output-dir-path xxx --css-file-suffix ""

  指定一个 css 文件目录,指定一个输出目录,指定一个 css 文件生成后缀

 

 当然这货也是有缺点的:

1. 基于 java ,所以必须需要 jre ;

2. 生成的 css 文件不能直接覆盖还有 css 文件,所以需要两个目录,一个 css 源目录,一个 css 输出目录;

3. 它是居于 css 注释语法,比如使用 Less 编译后 就会破坏其 注释语法, 这个我已经有处理 grunt-contrib-less-smartsprite 

 

 

 

 更多文档请移步 http://csssprites.org/

 如果在使用 smartsprite 过程中有什么疑问,可以留言,共同讨论!

 

 

 

 

 

  

 

posted @ 2013-11-07 20:34 张坤 阅读(...) 评论(...) 编辑 收藏