gistfile1.md

0.はじめに

http://compass-style.org/help/tutorials/spriting/

http://compass-style.org/reference/compass/helpers/sprites/

何番煎じかって感じだけどこのあたりの内容がわかりづらかったので分かる範囲でまとめた

0.1. ディレクトリ構成

┗img
 ┗sprite
  ┗icon
   ┗icon1.png
   ┗icon2.png
┗sass
┗css

1.簡単なsprite

チュートリアルのsass項目に書いてある方法。ある程度自動化されているので少ない指定でspriteが作れる http://compass-style.org/help/tutorials/spriting/

1.1.sprite化したい画像のディレクトリ指定

[sass]

@import "sprite/icon/*.png";

これで、compassのconfig.rbで設定しているimg_dir（ここではimgディレクトリ）の下にあるsprite/icon/ディレクトリが、spriteの対象になる。

[css]

.icon-sprite, .icon1, .icon2 {
  background: url('/img/sprite/icon-s97307b1d71.png') no-repeat;
}

コンパイルすると以下のセレクタが、backgroundプロパティとともにグループセレクタとして出力される

• [map※]-sprite
• 各画像のファイル名

※mapは末端のディレクトリ名が入る

また、末端ディレクトリと同階層（末端ディレクトリの中ではない）に[map※]-[ハッシュ].pngでsprite画像が生成される。

┗img
 ┗sprite
  ┗icon-s97307b1d71.png

以降、compireされる度に指定したディレクトリ内の画像ファイルの差分がチェックされ、差分がある場合はsprite画像が再出力され、ハッシュ値が更新される。

画像が追加された場合は、上記処理に加えてcssにクラス名が追加される。

1.2.spriteされた個別画像の利用

1.2.1.任意のセレクタで利用

[sass]

.foo {
  .bar   { @include icon-sprite(icon1);}
  .baz   { @include icon-sprite(icon2);}
}

任意のセレクタ下で、@include [map]-sprite([sprite※])で指定する。
※spriteには、拡張子を除いたファイル名が入る。

[css]

.icon-sprite, .foo .bar, .foo .baz, .icon1, .icon2 {
  background: url('/images/sprite/hoge-s97307b1d71.png') no-repeat;
}
.foo .bar {
  background-position: 0 -32px;
}
.foo .baz {
  background-position: 0 -16px;
}

任意のセレクタに個別画像のpositionが出力されつつ、sprite画像をしていているルールセットに任意のセレクタがextendされる。

1.2.2. セレクタを指定せず、ファイル名から自動出力したものを利用

[sass]

@include all-icon-sprites;

@include all-[map]-spritesで指定する。

[css]

.icon1 {
  background-position: 0 -32px;
}

.icon2 {
  background-position: 0 -16px;
}

1.3.sprite画像の設定と値の取得

1.3.1.sprite設定

@importによるspriteディレクト指定の前に、以下の変数を上書きすることで、sprite設定を変更できる

[sass]

$[map]-spacing:30px;
//各画像間の隙間 デフォルトは0

$[map]-sprite-base-class:.bar;
//sprite時のベースとなるクラス名を変更できる。デフォルトは.[map]-sprite

$[map]-clean-up:false;
//spriteが更新された場合に古いファイルを消すか。flaseで、更新しても古いファイルが消えない。デフォルトはtrue

$[map]-layout:horizontal;
//sprite画像の並び方。vertical（縦一列）、horizontal（横一列）、diagonal（斜め）、smart（順に敷き詰め）

$[map]-[sprite]-spacing:20px;
//特定の画像の隙間

$[map]-[sprite]-repeat:repeat-x;
//特定の画像の繰り返し

$[map]-[sprite]-position:100%;
//特定の画像のsprite上の位置。100%を指定した場合、layoutがverticalの場合だと下、horizontalの場合だと右に出力される


//以下要調査
$[map]-repeat:repeat-x;
//全パーツのリピート？指定したらcompassおちた

$[map]-position:100%;
//全パーツの位置？指定したらcompassおちた

$[map]-sprite-dimensions:true;
//不明

1.3.2.sprite関連の値の取得

[map]-sprite-height([sprite])、[map]-sprite-width([sprite])で、指定した画像の幅と高さが取れる。

[sass]

.foo {
  height:icon-sprite-height(icon1);
  width:icon-sprite-width(icon2);
}

[css]

.foo {
  height: 5px;
  width: 3px;
}

ここまでに説明した方法はspriteを簡単に扱える変わりに、画像の生成とクラス名の制御が一体化していたりするので、細い制御を加えたくても出来ない面がある。

さらに細かく動作を指定したい場合は、CSS Sprite Helpersを使う http://compass-style.org/reference/compass/helpers/sprites/

2.より細かいsprite（CSS Sprite Helpers）

2.1.spriteの実行

指定したディレクトリに対して画像の結合をする。クラス名の出力などは行わない。

[sass]

$hoge: sprite-map("[sprite画像があるディレクトリのパス]*.png");

spriteの設定を変えたい場合は引数で指定

[sass]

$hoge: sprite-map("[sprite画像があるディレクトリのパス]*.png",$spacing: 20px);

引数で指定できる値は、1.3.1.sprite設定に書いてある変数から、頭の[map]-を除いたもの。

例：

[sass]

$hoge: sprite-map("sprite/icon/*.png",$spacing: 20px,$layout: smart);

2.2.sprite関連の値の取得

以下の値の取得を組み合わせてsprite画像を指定する。

[sass]

.foo{
  content:sprite($hoge, icon1);
  //sprite画像のパス(url('')形式)と、特定画像のposition

　content:sprite($hoge, icon1,10px,10px);
　//上記のpositionから、引数でオフセットした値

　content:sprite-path($icons);
　//sprite画像のパスのみ ※compassのリファレンスには載っていないが内部ではこの関数を使っている

　content:sprite-url($hoge);
　//sprite画像のパスのみ(url('')形式)

　content:sprite-position($hoge, icon1);
　//個別画像のpositionの値のみ

　content:sprite-position($hoge, icon1,10px,10px);
　//上記のpositionから、引数でオフセットした値のみ


　@include sprite-dimensions($hoge, icon1);
　//個別画像のサイズをwidth/heightプロパティでまとめて出力

　content: image-width(sprite-file($hoge, icon1));
　//個別画像のサイズのwidthの値

　content: image-height(sprite-file($hoge, icon1));
　//個別画像のサイズのheightの値


　content:sprite-map-name($hoge);
　//sprite名(末端ディレクトリ名)

　content:sprite-file($hoge, icon1);
　//結合元画像のパス


　content:image-width(sprite-path($icons));
　//sprite画像のwidthの値

　content:image-height(sprite-path($icons));
　//sprite画像のheightの値
}

[css]

.foo {
  content: url('/img/sprite/icon-s97307b1d71.png') 0 0;
  content: url('/img/sprite/icon-s97307b1d71.png') 10px 10px;
  content: sprite/icon-s97307b1d71.png;
  content: url('/img/sprite/icon-s97307b1d71.png');
  content: 0 0;
  content: 10px 10px;
  height: 5px;
  width: 3px;
  content: 5px;
  content: 3px;
  content: icon;
  content: [ローカルのパス]/img/sprite/icon/icon1.png;
  content: 100px;
  content: 116px;
}

2.3.実際に組み合わせてspriteを作った例

[sass]

$hoge: sprite-map("sprite/icon/*.png");

%fuga {
  background:sprite-url($hoge) no-repeat;
}

.foo {
  .bar {
    @extend %fuga;
    background-position: sprite-position($hoge, icon1);
    @include sprite-dimensions($hoge, icon1);
  }
  .baz {
    @extend %fuga;
    background-position: sprite-position($hoge, icon2);}
    @include sprite-dimensions($hoge, icon2);
}

[css]

.foo .bar, .foo .baz {
  background: url('/img/sprite/icon-s97307b1d71.png') no-repeat;
}

.foo .bar {
  background-position: 0 -32px;
  height: 5px;
  width: 3px;
}
.foo .baz {
  background-position: 0 -16px;
  height: 13px;
  width: 10px;
}