Posted at

CompassのSpriteが進化していた

More than 3 years have passed since last update.

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-imagebackground-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.

がベストアンサーな気がします。

(継続リサーチ中)