最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

利用sass的compass自动合并icon图标形成css sprite雪碧图和对应css样式

web综合 rockyxia 15207浏览

写在前面

css sprite是广大页面仔(前端开发攻城狮)在页面制作经常使用到的一种图片拼合技术,又称css雪碧图或css精灵,能够减少页面请求数、减小图片尺寸,从而达到提升页面访问速度的效果。但是这种技术的缺点也是相当的明显,就是拼图和后期维护的成本比较大,所以经常的使用的时候需要非常的注意,还要保留拼图的psd文件。虽然svg以及iconfont等新技术的出现改善了一些,但是svg和iconfont的使用也有一些制约,不是本文重点不复述,本文主要来说说自动合成css sprite的技术。

对于前端来说sass应该不是一个陌生的工具了,而sass拥有一个强大的compass,compass工具库里面有个Sprites可以帮助我们去自动拼合icon图标并且生成对应的css样式。

安装compass

安装compass之前确认电脑已经安装了rubysass环境,rubysass的安装可以参考我之前的文章:

WIN7成功安装SASS记录

上面的文章中也包含compass的安装,安装完成后可以通过以下指令查看版本号:

$ ruby -v
ruby 2.2.4p230 (2015-12-16 revision 53155) [x64-mingw32]

$ sass -v
Sass 3.2.13 (Media Mark)

$ compass -v
Compass 0.12.2 (Alnilam)

新建compass项目

使用命令行工具进入项目目录,输入以下命令:

$ compass init

会生成相应的目录和配置文件。在images目录下新建icon、param、status分别用于我们接下来将要进行的测试。

– sass
– stylesheet
– images
 |– icon
 |– param
 |– status

config.rb文件新增配置如下:

relative_assets = true    // 使用相对目录
line_comments = false     // 关闭行注释

完整设置:https://github.com/rockyxia/sass-compass-sprite/blob/master/config.rb

参考:compass项目配置文件config.rb

大招:合并雪碧图生成css样式

生成所有雪碧图样式

sass目录下新建icon.scss文件,并输入如下代码:

@import "compass/utilities/sprites"; //加载compass sprites模块
@import "icon/*.png";                //导入icon目录下所有png图片
@include all-icon-sprites;           //生成所有雪碧图样式css

在命令行工具中执行compass compile进行编译,此时会发现images目录下多了一个合并后的图片icon-xxxxxxxx.pngstylesheet目录下生成了对应的icon.css文件:

.icon-sprite, .icon-spirit1, .icon-spirit2, .icon-spirit3, .icon-spirit4, .icon-spirit5, .icon-spirit6 {
  background: url('../images/icon-s5039fcecdd.png') no-repeat;
}

.icon-spirit1 {
  background-position: 0 -416px;
}

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

.icon-spirit3 {
  background-position: 0 -104px;
}

.icon-spirit4 {
  background-position: 0 -312px;
}

.icon-spirit5 {
  background-position: 0 -520px;
}

.icon-spirit6 {
  background-position: 0 -208px;
}

这样我们就实现了一个简单的雪碧图合并,而且只用了三行代码,是不是非常的便捷呢。生成的代码中.icon-sprite是雪碧图的基础类,这是默认的,当然他也支持自定义配置,后面会介绍。生成的每个icon默认的class规则是:.目录名-图片名。如果需要自定义,我们还额可以通过单独设置雪碧图的方式来实现。

单独设置某个雪碧图样式

我们再在sass目录下新建icon.single.scss文件,并输入如下代码:

@import "compass/utilities/sprites";
@import "icon/*.png";
.spirit3 {
    @include icon-sprite(spirit3);
}

再使用compass compile编译一下,stylesheet目录下生成了一个新的icon.single.css文件:

.icon-sprite, .spirit3 {
  background: url('../images/icon-s5039fcecdd.png') no-repeat;
}

.spirit3 {
  background-position: 0 -104px;
}

Magic Selectors生成带状态的雪碧图样式

有时我们的图标会有多种状态,比如hoveractive等。compass的sprite提供了Magic Selectors支持在图标名称后面增加_active_target_hover的命名规则来对应三种状态。例如:

exam.png //默认状态图标
exam_hover.png //hover状态图标
exam_active.png //active状态图标
exam_target.png //target状态图标

还是一样在sass目录下新建status.scss文件,并输入如下代码:

@import "compass/utilities/sprites";
@import "status/*.png";
@include all-status-sprites;

有没有发现与生成所有雪碧图样式中的代码一样,也就是说不需要增加其他配置,只要图标命名按照指定规则就会自动生成状态图标。使用compass compile编译一下,stylesheet目录下生成了一个新的status.css文件:

.status-sprite, .status-exam {
  background: url('../images/status-sfb29666926.png') no-repeat;
}

.status-exam {
  background-position: 0 -140px;
}
.status-exam:hover, .status-exam.exam_hover, .status-exam.exam-hover {
  background-position: 0 -420px;
}
.status-exam:target, .status-exam.exam_target, .status-exam.exam-target {
  background-position: 0 -560px;
}
.status-exam:active, .status-exam.exam_active, .status-exam.exam-active {
  background-position: 0 0;
}

我们已经利用compass实现了简单的雪碧图合成,compass还提供了一些可以配置的选项,我们在来简介介绍一下常用的几个。

compass生成雪碧图的配置项

先来看下配置相关的语法:

$<map>-<property>: setting;             // 配置所有sprite
$<map>-<sprite>-<property>: setting;    // 配置单个sprite

解释一下:

  • <map>: 对应图标存放的文件夹名称,如上面例子中的:icon和status
  • <property>: 对应的设置项,例如: spacing是间距, repeat是重复性等
  • <sprite>: 对应单个图标的名称,如上面例子中的: spirit1, spirit2, spirit3等

具体的使用可以看param.scss:https://github.com/rockyxia/sass-compass-sprite/blob/master/sass/param.scss。介绍一下几个常用的:

配置sprite间距

$<map>-spacing: 5px;                // 配置所有sprite间距为5px,默认为0px
$<map>-<sprite>-spacing: 10px;      // 配置单个sprite间距为10px,默认继承$<map>-spacing的值

配置sprite重复性

$<map>-repeat: no-repeat/repeat-x;        // 配置所有sprite的重复性,默认为no-repeat
$<map>-<sprite>-repeat: no-repeat/repeat-x; // 配置单个sprite的重复性,默认继承$<map>-repeat的值

配置sprite布局方式

$<map>-layout: vertical/horizontal/diagonal/smart;        // 默认布局方式为vertical

清除过期的sprite

$<map>-clean-up: true/false;        // 默认值为true

每当添加、删除或改变图片后,都会生成新的sprite,默认情况下compass会自动的移除旧的sprite,当然也可以通过配置$<map>-clean-up: false;来保留旧的sprite。

配置sprite的基础类

上面我们提到过一个默认的基础类名,这个基础类命也是可以自定义的,语法如下:

$<map>-sprite-base-class: ".class-name";

Magic Selectors开关

上面介绍了Magic Selectors可以根据规则命名自动生成各种状态的sprite样式,默认情况下这个功能是开启的,如果不想这样的话,也可以禁用它。语法如下:

$disable-magic-sprite-selectors: false;     // 默认为true

设置sprite尺寸

我们在合并雪碧图时,很多时候图片的尺寸都不一样,那么在使用时我们如何给每个sprite设置尺寸呢?compass有提供自动设置每个sprite尺寸的配置,默认是关闭的,我们只需手动启用即可。

$setting-sprite-dimensions: true;    // 启用自动设置sprite尺寸,默认值为false

这样输出的样式就会自动加上icon图标的尺寸了,例如:

.param-spirit1 {
  background-position: 0 0;
  height: 104px;
  width: 104px;
}

如果只对某个sprite单独设置的话,compass也提供了这个功能。语法如下:

$<map>-sprite-width($name);     // $name为合并前的图片名称
$<map>-sprite-height($name);

去除生成的sprite图片名字里的hash值(补充于20160901)

如果每次生成名字都是hash值的话,会带来一定的维护问题,所以能去掉这个值,用原本的文件夹名字直接作为名字是最好的啦。

参考此文:如何禁止 Compass 对生成的 Sprite 图片名字添加随机字符?

在配置文件config.rb中增加:

# 这里做了一个 copy 而不是直接重命名;你可以用 FileUtils.mv 直接重命名
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

# 除此之外,样式表里自动生成的声明也要修改一下
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |buffer|
      buffer << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

然后在清空compass clean再重新生成compass compile就ok啦。

结语

到此为止,我们就能很好的自动生成雪碧图了,使用工具处理了这种耗时、枯燥、重复性的工作。

本文示例已上传值github仅供参考:

sass-compass-sprite:https://github.com/rockyxia/sass-compass-sprite

转载请注明:Rockyxia Web技术博客 » 利用sass的compass自动合并icon图标形成css sprite雪碧图和对应css样式
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)