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混合器 須要精靈圖和精靈的名字