写在前面
css sprite是广大页面仔(前端开发攻城狮)在页面制作经常使用到的一种图片拼合技术,又称css雪碧图或css精灵,能够减少页面请求数、减小图片尺寸,从而达到提升页面访问速度的效果。但是这种技术的缺点也是相当的明显,就是拼图和后期维护的成本比较大,所以经常的使用的时候需要非常的注意,还要保留拼图的psd文件。虽然svg以及iconfont等新技术的出现改善了一些,但是svg和iconfont的使用也有一些制约,不是本文重点不复述,本文主要来说说自动合成css sprite的技术。
对于前端来说sass应该不是一个陌生的工具了,而sass拥有一个强大的compass,compass工具库里面有个Sprites可以帮助我们去自动拼合icon图标并且生成对应的css样式。
安装compass
安装compass之前确认电脑已经安装了ruby
及sass
环境,ruby
及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
大招:合并雪碧图生成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.png
,stylesheet
目录下生成了对应的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生成带状态的雪碧图样式
有时我们的图标会有多种状态,比如hover
、active
等。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值的话,会带来一定的维护问题,所以能去掉这个值,用原本的文件夹名字直接作为名字是最好的啦。
在配置文件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样式
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。