CSS Sprites

浏览数：26 / 时间：2015年06月09日

在css开发中有一件非常令人头疼的东西：拼背景图片。比如一个项目中有三种按钮：button-normal, button-submit, button-cancel。一般的方式是个人手动在PSD中新建一个较大的画布，把三个按钮分别移到该画布上，最后通过background-position定位。这个过程中有两步是比较耗时且不合理的：

1.在css中对需要的图标进行定位，尤其是集成度非常高的图片，一张图片中可能有数十个图标，而且图标之间的位置并没有绝对正确的规律，没有像素眼去调整位置是很消磨耐心的工作；
2.每一次有新的图标需要更新，都要注意不能移动以前图片的已有位置，然后再把新的图片添加进去，接着去为background-position定位。

但是出于对性能的追求，这件事情有时候还不得不做。事实上，在CSS和JavaScript文件的处理上也有类似的情况，目前已经有很好的解决办法，当人们厌倦了一直重复某件事情的时候，最终总会殊途同归：自动化。以Grunt举例，我想把scripts中所有的js文件合并并成app.min.js，grunt配置核心代码如下：

// Merge javascript files.
concat:
  js: { src: ‘/scripts/**/*.js‘, dest: ‘/scripts/temp/app.js‘ }
},
// Minifire javascript files.
uglify: {
  build: {
    files: { ‘/scripts/app.min.js‘: ‘/scripts/temp/app.js‘ }
  }
}

一句grunt命令操作完成。

Glue

接下来介绍的这个命令行工具glue做的甚至更多，假设我们有一个存放图片的文件夹scene,在同级目录下执行：

glue img css

发现img文件夹下的图片自动合并至css文件夹，生成以img命名的图片：img.png，和img.css，这个图片我们都知道是合并后的总图片，这个css文件是什么？打开看看：

.sprite-scene-weibo,
.website {
    background-image: url(‘scene.png‘);
    background-repeat: no-repeat;
}
.sprite-scene-weibo {
    background-position: 0 0;
    width: 52px;
    height: 52px;
}

.sprite-scene-website {
    background-position: -52px 0;
    width: 52px;
    height: 52px;
}

原来是背景图片定位的css代码！这样的话大功告成，之前提出的两个问题全部解决！如果有图片更新，把图片放到文件夹再执行glue命令即可。

还没有完，Glue做的比我们想象的更多，列一点可能是最无关紧要的：Retina支持。