CompassのSpriteが進化していた

Compassの最新バージョンのドキュメントを見ていたら、Sprite機能が知らない間に進化していた。(元々あったのかもしれない)

全自動の例 (Basic Usage)

Compassのconfigで指定した画像フォルダに、

icons
├ icon-facebook.png
├ icon-twitter.png
└ icon-github.png

という風に画像が入っていたとして、

<i class="icons-icon-facebook"></i>
<i class="icons-icon-twitter"></i>
<i class="icons-icon-github"></i>

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

@include all-icons-sprites;

.icons-sprite {
    display: inline-block;
    height: 48px;
    width: 48px;
}

sccss中の icons という部分が画像を入れたフォルダ名と連動します。

書き出されたCSSを見ると、最低限 background-image と background-position が定義されるだけなので、 display, width, height は自分で定義する。

自分で記述したい場合の例 (Selector Control)

あまりにも全自動で気持ち悪い場合は、
@include all-#{ディレクトリ名}-sprites; をやめて、

<i class="icons-sprite icon-facebook"></i>
<i class="icons-sprite icon-twitter"></i>
<i class="icons-sprite icon-github"></i>

$icon-names: ( 'icon-facebook'
               'icon-twitter'
               'icon-github'
               );

.icons-sprite {
    display: inline-block;

    @each $icon-name in $icon-names {
        &.#{ $icon-name } {
            @include icons-sprite($icon-name);
            height: icons-sprite-height($icon-name);
            width: icons-sprite-width($icon-name);
        }
    }
}

としても良い。
こちらも icons という部分は画像を入れたフォルダ名と連動します。

@include all-#{ディレクトリ名}-sprites;
を使用する場合、
.#{ディレクトリ名}-sprite
に対して記述した内容は、
.#{ディレクトリ名}-#{スプライト名}-sprite
すべてに対しても勝手に複製されるようなので、気がつかないうちにCSSが肥大化しように注意。

Magic Selectors

aタグのhoverなどステートに対して、画像ファイルの命名規則と連動して、勝手にCSSを定義する機能もあるようです。上で発生した

.#{ディレクトリ名}-sprite
に対して記述した内容は、
.#{ディレクトリ名}-#{スプライト名}-sprite
すべてに対しても勝手に複製されるようなので、気がつかないうちにCSSが肥大化しように注意。

も、この機能によるものと思われます。

Sprite Magic Selectors | Compass Documentation

できるだけ自分でコントロールしたい場合、
@include all-#{ディレクトリ名}-sprites;
は使わないほうがシンプルになりそう。

参考

公式ドキュメント
Spriting with Compass | Compass Documentation

スプライト画像の素材管理・自動書き出しについては、
スプライト画像とSVGを効率良く書き出し・コーディングするための考察 [書き出し編]
でまとめ中です。

さいごに

実用を考えると、Retinaディスプレイを想定した分岐などを加えていくので、もう少し複雑になります。

---

[2015/12/5追記]
色々考えると、Retina対応をするとけっこう複雑で、(おもにbackground-sizeの取り扱い)
Using Compass Generated Sprite Sheets in Responsive Sass, by Jayson Jacobs.
がベストアンサーな気がします。

（継続リサーチ中）