[Sass & Compass] Compass: CSS Sprite で画像ナビゲーションを作成する

公開日: 2014/08/12
更新日: 2018/11/13

Compass を使って、CSS Sprite による画像ナビゲーションを簡単に作成します。

[markdown]
以前に画像ナビゲーションを下記の方法で作成しました。

> [CSS: 画像ナビゲーションのマウスオーバー処理を visibility: hidden と Sass の @for で作る | deadwood](https://www.d-wood.com/blog/2014/06/27_6414.html)

この方法では、例えば透過画像を使いたい場合に、下に敷いた画像が見えてしまいます。
赤がにじんでいるように見えます（下図、上の「よこなが」）。

Compass を使った CSS Sprite で作ります。

## CSS Sprite とは

Compass のドキュメント。

> [Compass Sprites | Compass Documentation](http://compass-style.org/reference/compass/utilities/sprites/)

### Compass を利用しない方法

Compass を利用しない場合、色々手間がかかります。
こちらが参考になりました。

> [CSSスプライトについてあれこれ。](http://lopan.jp/css-sprites/)

### メリットとデメリット

下記のようなメリットがあります。

> [コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編｜ Developers.IO](http://dev.classmethod.jp/ria/html5/web-desiner-corder-scss-create-css-sprite/)
>
> CSS Spriteのメリット
>
> 1. 画像をくっつけることによってHTTPリクエスト数の削減
> 1. マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します）
> 1. CSSのみでボタンなどのアフォーダンスを切り替えることができる
>
> CSS Spriteのデメリット
>
> 1. 画像をまとめて作るのが手間
> 1. 画像に変更があった場合、座標の変更が手間
> 1. 画像をまとめる際に汎用性を考えどの座標に配置するか頭を使う
> 1. デザインする際に書き出しようのファイルを作る必要がある
> 1. alt属性は使えずテキストを置くことはできるが、テキストを見えなようにするテクニック（画像置換）は要注意
>
> CSS Spriteは価値のあるテクニックですが上記のような手間のかかるものでもあります。
> そこでSCSS・Compassを使うことでほとんどのデメリットを解消することができます。

## 準備

CSS Sprite を利用します。
今回は上図サンプルのように、縦横の大きさがバラバラの画像を利用し、マウスホバー処理をさせます。

### Compass を設定する

config.rb で画像パスに関わる設定は以下あたりでしょうか。
`relative_assets` では、絶対パスから相対パスに変更します。

“`ruby:config.rb
http_path = “/”
images_dir = “images”
relative_assets = true
“`

> * [Compass: 生成される CSS の画像パスを変更する | deadwood](https://www.d-wood.com/blog/2014/08/18_6643.html)

ちなみに Grunt で設定したい場合には、こちらを参考にすると良さそうです。

> [Compass+GruntでCSSスプライトを使う | chikathreesix](http://chikathreesix.com/?p=167)

### 画像を切り出す

画像をパーツ毎に切り出しておきます。
対応する画像は .png のみです。

なお、下記のような画像 `_hover` を追加した画像を用意しておくと、css の `:hover` 処理まで行ってくれるのであらかじめ用意しておきます（詳しくは後述）。
ちなみに `_active` で `:active`、`_target` で `:target` のコードが生成されます。

* images /menus/y.png
* images /menus/y_hover.png
* images /menus/h.png
* images /menus/h_hover.png

今回は `menus` というフォルダに画像を入れておきます。

> [Sprite Magic Selectors | Compass Documentation](http://compass-style.org/help/tutorials/spriting/magic-selectors/)

このディレクトリ名は、Compass の記述内でも利用することになります。
マップ名とよばれるので `

` と以降記載します。

## つかいかた

はじめに必要な設定を全て書き出すと下記のようになります。
CSS Sprite させる画像を `span` などにクラスを付けて用意しておきます。
ディフォルトで生成されるクラス名は、`

–<ファイル名>` になります。

“`html

“`

Compass の機能を使って生成します。

“`css
/* CSS Sprite */
$menus-sprite-dimensions: true;
@import “menus/*.png”;
@include all-menus-sprites;
span {
display:inline-block;
}
“`

> * [display – CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/display)
> * [CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！](http://taneppa.net/display-inline-block/)

おのおのの記述については以下で確認していきます。

### マジックインポートでスプライト画像を生成する

マジックインポートで用意した画像ディレクトリをインポートすると、スプライト画像を自動生成してくれます。
`@import “

/*.png”;` の部分で、ディレクトリ名を指定します。

> [Spriting with Compass | Compass Documentation](http://compass-style.org/help/tutorials/spriting/)

画像は `images/menus-s9b98db01ea.png` といった名称で、下記のように生成されます。
キャッシュされると表示が乱れるので、生成毎にランダムなファイル名が付けられるようです。

ファイル名とスタイルシートの内容を書き換えれば、下記のように変更もできるようです。
通常は必要なさそうですね。

> [css – How to turn off COMPASS SASS cache busting? – Stack Overflow](http://stackoverflow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472)

### マジックセレクタでスプライト CSS を生成する

ミックスインでスプライト CSS を自動生成できます。
`@include all-

-sprites;`
各画像のクラスと background-position を計算してくれます。
`:hover` の CSS もよしなに生成してくれます。

> * [Spriting with Compass | Compass Documentation](http://compass-style.org/help/tutorials/spriting/)
> * [Sprite Magic Selectors | Compass Documentation](http://compass-style.org/help/tutorials/spriting/magic-selectors/)

### 画像の縦横サイズを測る

`$menus-sprite-dimensions: true;` を付けると、各画像の縦横サイズを自動で測り、CSS に書き加えてくれます。
この他にも、このような初期設定が用意されています（後述）。

## 結果

スプライト画像（上記）と、以下のようなCSSが生成されました。

“`css
/* CSS Sprite */
.menus-sprite, .menus-h, .menus-v {
background-image: url(‘../images/menus-s9b98db01ea.png’);
background-repeat: no-repeat;
}
.menus-h {
background-position: 0 0;
height: 27px;
width: 110px;
}
.menus-h:hover, .menus-h.h-hover {
background-position: 0 -27px;
}
.menus-v {
background-position: 0 -54px;
height: 110px;
width: 28px;
}
.menus-v:hover, .menus-v.v-hover {
background-position: 0 -164px;
}
span {
display: inline-block;
}
“`

あとは各画像を position で位置調整すれば、必要な出力が得られます。

## スプライトの制御とカスタマイズ

### Sprite Dimensions

上述で実行したオプション。
CSS に画像の Width と Height を加えてくれます。

“`css
$

-sprite-dimensions: true;
@import “

/*.png”;
“`

> [Sprite Customization | Compass Documentation](http://compass-style.org/help/tutorials/spriting/customization-options/)

### Sprite Spacing

ディフォルトではスプライト画像は余白無し（0 px）で配置されています。
これに余白を加えることができます。

“`css
$

-spacing: 20px;
@import “

/*.png”;
“`

> [Sprite Customization | Compass Documentation](http://compass-style.org/help/tutorials/spriting/customization-options/)

### Sprite Layouts

ディフォルトのスプライト画像は縦に画像が並びます。
このオプションで、これを変更できます。

“`css
$

-layout: horizontal;
@import “

/*.png”;
“`

> [Sprite layouts | Compass Documentation](http://compass-style.org/help/tutorials/spriting/sprite-layouts/)

### Selector Control

`all-

-sprites` の代わりに、`

-sprite($name)` を利用すると、スプライト CSS を個別に出力できます。
手動でクラス名を変更したい場合に。

“`css
.

-h {
@include

-sprite(h);
position: absolute;
top: 90px;
left: 30px;
}
“`

“`css
.

-h {
background-position: 0 0;
height: 27px;
width: 110px;
position: absolute;
top: 90px;
left: 30px;
}
“`

この他にクラス名を変更したい場合は、@extend を利用する形式でしょうか。

“`css
.foo { @extend .menus-h; }
“`

このあたりを利用すれば、必要な出力が得られそうです。

> * [爆捗！ WordPressテーマ作成ショートカット（6）：CSSコーディングでいますぐ使えるSass／Compass実践テク10連発！ (2/3) – ＠IT](http://www.atmarkit.co.jp/ait/articles/1402/26/news113_2.html)

## 補遺

> * [Compassで超簡単にCSSスプライト画像を作成する](http://blog.qaramell.com/archives/14211)
> * [CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG](http://liginc.co.jp/designer/archives/11623#a32)

### sprite-map

Compass のヘルパーを利用して、マジックインポートを使わずにスプライト画像を生成することもできる。

> * [CSS Sprite Helpers for Compass | Compass Documentation](http://compass-style.org/reference/compass/helpers/sprites/)

必要に応じて sprite-map で細かい制御を行う際に利用するよう。
下記の Retina 対応を含め、また確認する。

> * [Compassで簡単CSSスプライト | toybox-design.net](http://toybox-design.net/?p=622)
> * [コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編｜ Developers.IO](http://dev.classmethod.jp/ria/html5/web-desiner-corder-scss-create-css-sprite/)
> * [Compassで楽々スプライト｜sass｜study｜kanapple.net](http://kanapple.net/study/archives/54)
> * [Compassで簡単、CSSスプライト作成 – CSSスプライト作成の基礎 | CodeGrid](https://app.codegrid.net/entry/compass-sprite-1)

### Retina 対応

> * [パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite — MOL](http://t32k.me/mol/log/spriting-with-compass/)
> * [コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編｜ Developers.IO](http://dev.classmethod.jp/tool/scss-compass-fast-development-for-retina/)
> * [Sass/Compassを使ってCSSスプライトに挑戦してみました。](http://www.riaxdnp.jp/?p=4015)
> * [Compassで複数のSprite画像を扱う | Webamb | ウェブアンブ](http://webamb.com/compass/890.html)
> * [CompassでCSSスプライト（Retina対応） | clear sky source](http://maboroshi.biz/clearskysource/?p=608)
> * [compassでcssスプライトするときの出力をできるだけ少なくする試み – しるてく](http://ofsilvers.hateblo.jp/entry/compass-sprite-mixins)
[/markdown]