Bubblings Blog

使用compass自动合并css雪碧图(css sprite)

css雪碧图又叫css精灵css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大。也正是因为这一点,导致很多开发者懒于使用css雪碧图。

对于这种耗时、枯燥、重复性的工作,最好的解决方法还是交给工具去处理。本文就介绍下怎样使用compass来自动合并css雪碧图。

compass

安装compass

首先请确认电脑已经安装rubysass环境,rubysass的安装过程可参考:

sass入门指南

sass入门指南

css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass、less、stylus。关于三者选择问题一直都是比较受争议的话题,这里就不在讨论了,适合的就是最好的。这篇文章主要会介绍一些sass的常见用法,当然很多理论都是相通的。

sass

在介绍sass前,我们先得明确几点:

  1. sass并不是css的替代品,它只是让css变得更加高效、可维护
  2. 永远不要去修改生成后的css
  3. 部署到线上的是生成的css文件,不是sass文件,sass的工作流如下图

sass工作流