【Sass中级】使用Sass和Compass制做雪碧图
“Image Spriting”的工做原理是一堆的图像（称为“sprites”,精灵）合并成一张大的图像（国内称为雪碧图），以达到减小HTTP的请求数。而后经过background-position巧妙的显示雪碧图中须要呈现的图像。php
下图是一个工具栏的雪碧图：css
鉴于上面的图片，咱们能够为媒体图标这样写样式：html
$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轴第一个图像以后：python
雪碧图是出名的难维护。添加一个新的图像须要更新图像与相关的CSS。更糟糕的是若是你要删除一个图像时，会变得更为复杂。你会怎么作呢？从新作过一张雪碧图？web
Compass来拯救你
幸运的是，Chris Eppstein的Compass项目包括了一套强大的工具，用于自动建立和维护雪碧图。Compass能够建立雪碧图，给出每一个图的精确坐标，还可让你控制图的布局下间距，并在SCSS中写入须要的图像。总之，Compass中制做雪碧图的工具，将节省你大量的时间与精力。sql
我并不想从头开始介绍Compass，由于这是项目浩大的工程，何况官网已经有不少教程。若是你并不熟悉Compass，我建议你先阅读这些教程先。缓存
目录结构
根据Compass制做雪碧图的基本原理，你把图像放在一个文件夹中，并且这个文件夹放在images/的目录下，Compass会根据您提供的源图片生成一张雪碧图。对于咱们工具栏的例子，我将图片源都放在了images/toolbar目录下，就像下面这样：sass
images/
|
`-- toolbar/ |-- bold.png |-- italic.png |-- link.png |-- code.png |-- unordered-list.png |-- ordered-list.png ...
请记住，你应该只把须要的图片源放到这个文件夹内。Compass会利用这些图片源合并出你最图须要的雪碧图。ruby
为了能更好的经过示例演示Compass和Sass实现雪碧图，将原文中的示例换成下图所示：（为了避免去找图片源，我使用了我电脑中的一些图片以示说明）bash
最简单的方法
制做雪碧图最简单的方法就是使用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: