“Image Spriting”的工作原理是一堆的图像(称为“sprites”,精灵)合并成一张大的图像(国内称为雪碧图),以达到减少HTTP的请求数。然后通过background-position
巧妙的显示雪碧图中需要呈现的图像。
下图是一个工具栏的雪碧图:
鉴于上面的图片,我们可以为媒体图标这样写样式:
$icon-width: 24px;
$icon-height: 24px;
$icons: image-url('toolbar.png');
.media-icon {
background-image: $icons;
background-position: -($icon-width * 5) -($icon-width * 1);
width: $icon-width;
height: $icon-height;
}
这样做是媒体图像是背景图中X轴方向的第五个之后,Y轴第一个图像之后:
雪碧图是出名的难维护。添加一个新的图像需要更新图像与相关的CSS。更糟糕的是如果你要删除一个图像时,会变得更为复杂。你会怎么做呢?重新做过一张雪碧图?
Compass来拯救你
幸运的是,Chris Eppstein的Compass项目包括了一套强大的工具,用于自动创建和维护雪碧图。Compass可以创建雪碧图,给出每个图的精确坐标,还可以让你控制图的布局下间距,并在SCSS中写入需要的图像。总之,Compass中制作雪碧图的工具,将节省你大量的时间与精力。
我并不想从头开始介绍Compass,因为这是项目浩大的工程,况且官网已经有很多教程。如果你并不熟悉Compass,我建议你先阅读这些教程先。
目录结构
根据Compass制作雪碧图的基本原理,你把图像放在一个文件夹中,而且这个文件夹放在images/
的目录下,Compass会根据您提供的源图片生成一张雪碧图。对于我们工具栏的例子,我将图片源都放在了images/toolbar
目录下,就像下面这样:
images/
|
`-- toolbar/
|-- bold.png
|-- italic.png
|-- link.png
|-- code.png
|-- unordered-list.png
|-- ordered-list.png
...
请记住,你应该只把需要的图片源放到这个文件夹内。Compass会利用这些图片源合并出你最图需要的雪碧图。
为了能更好的通过示例演示Compass和Sass实现雪碧图,将原文中的示例换成下图所示:(为了不去找图片源,我使用了我电脑中的一些图片以示说明)
最简单的方法
制作雪碧图最简单的方法就是使用Compass的@import
命令:
@import "images/toolbar/*.png";
如果你的Sass更新到了最新版本(Sass 3.3.7 (Maptastic Maple)),那么运行上面的命令将无法实现,在命令终端会报错误信息。这个时候你只需要在命令终端运行:
gem install compass --pre
。使用compass -v
命令查看你的版本号是不是:Compass 1.0.0.alpha.19。如果无误,我们可以继续往下。下面内容是译者实战中的经验:
为了能更好的实战Compass和Sass制作雪碧图,将原文中的结构换成了上图的效果,从图中可以看出,我们所有*.png
放在一个名叫“Color”的文件目录之下,而且这个文件夹是放置在“images/
”之下。如果按照原文教程所言,在.scss
文件中直接通过@import
命令引用:
@import "images/toolbar/*.png";
根据示例所示,我们只需要把toolbar
换成我们的Color
:
@import "images/Color/*.png";
开启compass watch
命令,终端会提示:
>>> Compass is watching for changes. Press Ctrl-C to Stop.
info sass/screen.scss was modified
overwrite stylesheets/ie.css
overwrite stylesheets/print.css
error sass/screen.scss (Line 8: No files were found in the load path matching "images/Color/*.png". Your current load paths are: /Applications/XAMPP/xamppfiles/htdocs/Sites/sass-test/images)
overwrite stylesheets/screen.css
文件路径错误,按照我们写CSS的经验,我将路径做相应的调整:
@import "../images/Color/*.png";
命令检测到:
info sass/screen.scss was modified
identical stylesheets/ie.css
identical stylesheets/print.css
remove images/Color-s36a4fadee6.png
create images/Color-s1760dc49ac.png
overwrite stylesheets/screen.css
虽然不报错,但看编译出来的.css
文件,不难发现路径存在问题:
.Color-sprite {
background-image: url('/images/../images/Color-s1760dc49ac.png');
background-repeat: no-repeat;
}
说实在的,这让我困惑。后来,我在想,是不是Compass已具备此功能,我们只需要将路径改成包含图片的文件夹开始,于是我尝试这样写:
@import "Color/*.png";
命令终端也不路径错误,而且编译出来的CSS也是我想要的:
.Color-sprite {
background-image: url('/images/Color-s36a4fadee6.png');
background-repeat: no-repeat;
}
此时在你的项目的"images/"可以看到一张名为“Color-s36a4fadee6.png
”的图,如下所示:
大家可能会感到非常神奇,想知道为什么?那么我们接下来回到原文。
在Compass看到@import
指令的参数为*.png
时,它会假定将这个目录下的所有.png
图片制作成一张雪碧图。让他生成一个mixin,使您在项目中更好的使用雪碧图。
其中mixin可以为雪碧图的所有图像生成对应的类。对于mixin的名称是基于引入图的文件夹名。例如我们的示例:
@include all-toolbar-sprites;
编译出来的CSS:
.toolbar-sprite, .toolbar-bold, .toolbar-italic, .toolbar-link {
background-image: url('../images/toolbar-s1f1c6cbfd0.png');
background-repeat: no-repeat;
}
.toolbar-bold {
background-position: 0 0;
}
.toolbar-italic {
background-position: 0 -24px;
}
.toolbar-link {
background-position: 0 -48px;
}
请注意,Compass为我们自动创建了一张“toolbar-s1f1c6cbfd0.png”图片。这就是我们的雪碧图。这命名我们放图像的文件夹(在这个例子中叫toolbar)加上一串字母和数字。每当你更新图片源时,缓存的CSS就知道,并且会更新雪碧图。
我们再次回到我实战的用例中来(是不是感觉蛮乱的,有点神游)。按照原文的教程所言,我在实际用例中是这样做的:
在.scss
文件通过@include
调用Compass生成的mixin:
@include all-Color-sprites;
输出的CSS代码:
.Color-sprite, .Color-Behance, .Color-Deviantart, .Color-Dribbble, .Color-Facebook, .Color-Forrst, .Color-Github, .Color-LastFM, .Color-LinkedIn, .Color-Picasa, .Color-RSS, .Color-Skype, .Color-Tumblr, .Color-Twitter, .Color-Youtube {
background-image: url('/images/Color-s36a4fadee6.png');
background-repeat: no-repeat;
}
.Color-Behance {
background-position: 0 0;
}
.Color-Deviantart {
background-position: 0 -52px;
}
.Color-Dribbble {
background-position: 0 -104px;
}
.Color-Facebook {
background-position: 0 -156px;
}
.Color-Forrst {
background-position: 0 -208px;
}
.Color-Github {
background-position: 0 -260px;
}
.Color-LastFM {
background-position: 0 -312px;
}
.Color-LinkedIn {
background-position: 0 -364px;
}
.Color-Picasa {
background-position: 0 -416px;
}
.Color-RSS {
background-position: 0 -468px;
}
.Color-Skype {
background-position: 0 -520px;
}
.Color-Tumblr {
background-position: