CSS雪碧图
之前用LESS时，一直没有使用过雪碧图，感觉意义不大，虽然有以下好处：

  • 减少请求数，可以增加加载速度
  • 一次加载完成后，在有图片切换的情况，不会出现图片闪动(实际是从无到有，切换后才加载，中间无显示)

但是也有不好的地方：

  • 后期维护成本加大
  • 适配时有问题

在使用compass时，因为图片闪动的问题，使用了雪碧图。但是又因为适配的问题，去掉了雪碧图
总结一下雪碧图的使用。

config.rb的配置

1
2
3
4
5
6
7
8
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "javascripts"

relative_assets = true    // 使用相对目录。 如果不配置，生成的图片链接会有问题
line_comments = false    // 关闭行注释

输出所有雪碧图的样式

1
2
3
@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "tab/*.png";                    // 导入tab目录下所有png图片
@include all-tab-sprites;                // 输出所有的雪碧图css. all-文件夹名-sprites

输出的样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
.tab-sprite,  .tab-qq, .tab-weibo {
  background-image: url('../img/tab-s7fefca4b98.png');
  background-repeat: no-repeat;
}

.tab-qq {
  background-position: 0 -44px;
}

.tab-weibo {
  background-position: 0 -88px;
}

输出的样式前缀是文件夹的名称，如 @import “tab/*.png”; 中的 tab;
输出的样式包含总的样式、各个图片的样式：

  • 总的样式：tab-sprite, 文件夹名-sprite
  • 各个图片样式: tab-qq, 文件夹名-图片名

输出单个雪碧图样式

1
2
3
4
5
@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "tab/*.png";                    // 导入tab目录下所有png图片
.test{
    @include tab-sprite(qq);
}

输出：

1
2
3
4
5
6
7
.tab-sprite,.test{
    background-image: url('../img/tab-s7fefca4b98.png');
    background-repeat: no-repeat;
}
.test{
    background-position: 0 -44px;
}

智能输出

智能输出会根据图片文件的命名，生成对应状态的样式文件。如
qq.png
qq_active.png

1
2
3
@import "compass/utilities/sprites";    // 加载compass sprites模块
@import "tab/*.png";                    // 导入tab目录下所有png图片
@include all-tab-sprites;                // 输出所有的雪碧图css. all-文件夹名-sprites

输出：

1
2
3
4
5
6
7
8
9
10
11
.tab-sprite,  .tab-qq, .tab-weibo {
  background-image: url('../img/tab-s7fefca4b98.png');
  background-repeat: no-repeat;
}

.tab-qq {
  background-position: 0 -44px;
}
.tab-qq:active, .tab-qq.tab-qq-active {
  background-position: 0 -88px;
}

参考链接：http://www.w3ctech.com/topic/620

本文地址： http://gehaiqing.com/2016/10/19/compass-sprite/