はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > Compass > Compass でスプライト画像を作ってみる

Compass でスプライト画像を作ってみる

Compass CSS Sass

Compass でスプライト画像を作ってみる

Compass では、画像から自動でスプライト画像を作ってくれる。 実際に試してみたのでメモ。

スプライト画像生成（自動クラス割り当て）

  1. 画像ディレクトリパス（imagesフォルダ）に、スプライト画像にしたい画像を入れたフォルダ（今回はicons）を入れておく。

    今回は以下の画像を使用。Google のMaterial Design向けのアイコンである。
    ic_filter_drama_black_18dp.png ic_camera_alt_black_18dp.png ic_flash_on_black_18dp.png

    Material icons guide - Google design

  2. png 画像であれば、@import "画像入れたファルダ名/*.png" と @include all-画像入れたファルダ名-sprites をSass ファイルへ以下のように書いておく。

    Sass

    @import "compass";

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

  3. これだけで自動でコンパイルされ、スプライト画像が生成されます。

    スプライト画像

    スプライト画像

    CSS

    生成されるCSS

    .フォルダ名-画像名 のセレクタが作られるので、これをHTML で呼べばいい。

マジックセレクタ

スプライト画像に、:hover, :active, :target などの擬似クラスも使って画像を切り替えたい場合、 以下のように、ファイル名_擬似クラス.png とファイル名を付けてコンパイルするだけで、セレクタを分けることができる。

Sprite Magic Selectors | Compass Documentation

ディレクトリ構成

images/icons/icon1.png
images/icons/icon1_hover.png

CSS

CSS（マジックセレクタ）

スプライト画像生成（手動クラス割り当て）

上記でやると、自動でクラス名が割り当てられるが、 自分の指定した名前を付けることもできる。

.class_name { @include ファルダ名-sprite(画像名); } と書けばいい。

Sass

.icons {
 .camera { @include icons-sprite(ic_camera_alt_black_18dp); }
 .cloud { @include icons-sprite(ic_filter_drama_black_18dp); }
 .flash { @include icons-sprite(ic_flash_on_black_18dp); }
}

CSS

f:id:cartman0:20150725205340j:plain