使用sass与compass合并雪碧图(一)

雪碧图就是不少张小图片合并成一张大图片，以减小HTTP请求，从而提高加载速度。有不少软件能够合并雪碧图，但一般不太容易维护，使用compass生成雪碧图应该算是很是方便的方法了，能够轻松的生成雪碧图，并且易维护。

安装sass与compass

安装sass能够参考这里。

安装完sass之后，使用下面命令安装compass:

> gem install compass

配置环境

进入项目目录，使用下面命令初始化项目：

> compass init

该命令会在当前目录中生成一些文件：

- sass
  |-- ie.scss
  |-- print.scss
  |-- screen.scss

- stylesheets
  |-- ie.sss
  |-- print.sss
  |-- screen.sss

  config.rb

其中sass与stylesheets文件夹中的文件基本上没什么用。config.rb配置文件中的内容通常不须要改动，也能够根据须要修改。

合并图片

在当前目录下建立一个images的文件夹放置全部图片，而后在images文件夹中建立一个icons文件夹放置须要合并的图片。在sass文件夹中建立一个icons.scss文件，在文件中写入：

@import "icons/*.png";
@include all-icons-sprites;

而后，命令行执行compass compile命令，合并图片工做就已完成。images文件夹中多了一张icons-*******.png的图片。在stylesheets文件夹中会生成一个icons.css的文件：

.icons-sprite, .icons-car-icon, .icons-card-icon, .icons-hand-icon, .icons-light, .icons-pan, .icons-title, .icons-watch-icon, .icons-wheel, .icons-wheel1 {
    background-image: url('/images/icons-sd6ae4306cd.png');
    background-repeat: no-repeat;
}
    
.icons-car-icon {
    background-position: 0 0;
}

.icons-card-icon {
    background-position: 0 -124px;
}

.....

自定义类名

能够看到上面生成的css文件中的类名都是自动生成的，在实际应用中一般并不会使用上面的默认类名，这时须要自定义类名：

@import "icons/*.png";
.car-icon {
    @include icons-sprite(car-icon);    
}

注意：@include icons-sprite(car-icon)不要写成@include icons-sprites(car-icon)，不然会有意想不到的结果。@include all-icons-sprites这句能够去掉，就不会生成默认的类名了。上面输出的结果为：

.icons-sprite, .car-icon {
    background-image: url('/images/icons-sd6ae4306cd.png');
    background-repeat: no-repeat;
}

.car-icon {
    background-position: 0 0;
}

雪碧地图(Sprite maps)

可使用雪碧地图取代上面的@import，以下：

$icons: sprite-map("icons/*.png", $spacing: 8px, $layout: horizontal);
.car-icon {
    background-image: sprite-url($icons);
    width: image-width(sprite-file($icons, car-icon));
    height: image-height(sprite-file($icons, car-icon));
    background-position: sprite-position($icons, car-icon);
    background-repeat: no-repeat;
}

结果：

.car-icon {
    background-image: url('/images/icons-s6844bf5750.png');
    width: 242px;
    height: 116px;
    background-position: 0 0;
    background-repeat: no-repeat;
}

上面使用了不少compass内置的方法：

sprite-url($icons); //获取合并后雪碧图的url；
sprite-file($icons, $name); //获取目标icon；
image-width(); //获取图片宽度；
image-height(); //获取图片高度；
sprite-position($icons, $name); //获取图片坐标

设置图片尺寸

以前生成的css文件中并无设置图片的尺寸，通常状况下是须要设置的。能够经过下面的设置设置图片尺寸：

$icons-sprite-dimensions: true;

输出结果：

.car-icon {
    background-position: 0 0;
    height: 116px;
    width: 242px;
}

上面的设置会为每张图图片添加尺寸，也能够指定为某张图片添加尺寸：

.car-icon {
    @include icons-sprite(car-icon);
    width: icons-sprite-width(car-icon);
    height: icons-sprite-height(car-icon);
}

布局方式

布局方式就是生成的雪碧图中小图片的排列方式。compass提供了四中排列方法：vertical、horizontal、diagonal和smart。默认排列方式是vertical。

使用方法就是在icons.scss文件中加上：

$icons-layout: "vertical";

其余方式用法同样。

下面是四种布局生成的图片：

垂直排列

水平排列

斜向排列

智能排列

设置间距

一般，咱们会在图片与图片之间设置必定的间距，添加一下代码：

$icons-spacing: 8px;

上面为图片之间设置了8px的间距。

总结：

上面简单介绍了使用compass制做雪碧图。在使用生成的css文件时会有一个问题：在PC端咱们能够直接使用生成的css文件，但在移动端并不能直接使用，由于移动端须要缩放图片以适应不一样分辨率的屏幕。然而生成的css文件的宽高都是使用绝对单位px的，这样在移动端并不适用。因为篇幅缘由，我会在下一篇介绍在移动端怎样使用compass生成的雪碧图。