Compass精灵图

注意:目前Compass只能使用PNG格式的图片生成PNG精灵图

1. 精灵图制作

将img/icons/目录下的所有PNG图片生成一张精灵图

@import "compass/utilities/sprites";
@import "icons/*.png";

仅仅两行代码就可以生成一张精灵图，默认情况下，图片是竖向排列的

2. 为精灵生成CSS

@include all-<map>-sprites
@include <map>-sprites-<$name>

2.1 all-sprites混合器（<map>是一个占位符）

该混合器会为精灵图中的每个精灵生成CSS

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

生成的CSS大概是这样的：

.icons-sprite, .icons-blurb, .icons-office_word, .icons-pretty-bullet, .icons-text_message {
  background-image: url('../img/icons-sabba8eb1ed.png');
  background-repeat: no-repeat;
}

.icons-blurb {
  background-position: 0 0;
}

.icons-office_word {
  background-position: 0 -72px;
}

.icons-pretty-bullet {
  background-position: 0 -136px;
}

.icons-text_message {
  background-position: 0 -151px;
}

使用精灵图时，只需要将其添加到HTML标签中，或者也可以在SCSS文件中使用@extend从精灵继承,例如：
.nav{@extend .icon-blurb;}

2.2 single-sprite混合器

该混合器会针对单个精灵输出CSS

@import "compass/utilities/sprites";
@import "icons/*.png";
.btn {
    @include icons-sprites(pretty-bullet);
}

生成的CSS大概为：

.icons-sprite, .btn .icons-pretty-bullet {
  background-image: url('../img/icons-sabba8eb1ed.png');
  background-repeat: no-repeat;
}

.btn .icons-pretty-bullet {
  background-position: 0 -136px;
}

3. 自定义Compass精灵图/精灵CSS

3.1 自定义精灵图

$<map>-<property>: setting;
$<map>-<sprite>-<property>: setting;

注意:这些变量必须在导入精灵之前定义，否则不会生效

3.1.1 设置精灵间距

$<map>-spacing: 0px;
$<map>-<sprite>-spacing: 0px;

@import "compass/utilities/sprites";
$icons-spacing: 10px;
$icons-pretty-bullet-spacing: 50px;
@import "icons/*.png";

效果图

添加间距前：

添加间距后：

3.1.2 设置精灵的重复性

$<map>-repeat: no-repeat/repeat-x;
$<map>-<sprite>-repeat: no-repeat/repeat-x;

@import "compass/utilities/sprites";
$icons-repeat: repeat-x; 
@import "icons/*.png";

// 或者
@import "compass/utilities/sprites";
$icons-pretty-bullet-repeat: repeat-x;
@import "icons/*.png";

效果图

3.1.3 设置精灵的位置

$<map>-position: 0px;
$<map>-<sprite>-position: 0px;

@import "compass/utilities/sprites";
$icon-position: 20px;
$icons-pretty-bullet-position: 100%;
@import "icons/*.png";

效果图

3.1.4 精灵图布局

$<map>-layout: vertical/horizontal/diagonal/smart 默认为vertical

布局效果依次如下（除了默认）:

3.1.5 清除过期的精灵图

当添加、删除或者改变图片后，会生成新的精灵图，Compass默认会自动删除旧的精灵图，当然你也可以把它们保留下来。

$<map>-clean-up: true/false;

3.2 自定义精灵的CSS

3.2.1 输出尺寸

$<map>-sprite-height($name)
$<map>-sprite-width($name)
index.html

<div class="next"></div>

为每个精灵自动设置尺寸 $<map>-sprite-dimensions: true/false

main.scss

@import "compass/utilities/sprites";
$icons-sprite-dimensions: true;
@import "icons/*.png";
.next {
    @include icons-sprite(pretty-bullet);
}

生成的CSS大概为

.icons-sprite, .next {
  background-image: url('../img/icons-sabba8eb1ed.png');
  background-repeat: no-repeat;
}

.next {
  background-position: 0 -136px;
  height: 15px;
  width: 15px;
}

3.2.2 基础类

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

在上面的代码中，我们看到精灵图生成的CSS的基础类为.icons-sprites,icons就是图片所在的文件夹的名字，下面我们要改变它

@import "compass/utilities/sprites";
$icons-sprite-base-class: ".sprite-img";
@import "icons/*.png";

生成的CSS为

.sprite-img {
  background-image: url('../img/icons-sabba8eb1ed.png');
  background-repeat: no-repeat;
}

注意:仅有基础类发生改变。变量名、函数、混合器依然是相同的，它们的名字来源于图片文件夹名

3.2.3 伪选择器

$disable-magic-sprite-selectors: true/false

默认是开启的，即Compass会根据"_hover""_active""_target"结尾的名字时自动输出CSS的：hover,:active,:target伪选择器
例如，假如你想要为正常和悬停状态设置不同的精灵，那么只需要在文件夹中增加xxx.png,xxx_hover.png,Compass就会生成悬停时的精灵的CSS背景

.next {
  background-position: 0 -72px;
}
.next:hover, .next.next-hover {
  background-position: 0 -87px;
}

4. 精灵辅助器

4.1 创建精灵图

之前创创建精灵图的方法会为精灵图与每个精灵设置混合器和变量，这会有点浪费.

sprite-map($glob, ...)

例如：$icons:sprite-map("icons/*.png", $layout: smart)

4.2 精灵CSS

4.2.1 sprite辅助器

sprite($map, $sprite, [$offset-x], [$offset-y])

4.2.2 精灵位置

sprite-position($map, $sprite, [$offset-x], [$offset-y])
sprite-background-position($map, $sprite, [$offset-x], [$offset-y])

4.2.3 精灵尺寸

sprite-dimensions混合器 需要精灵图和精灵的名字