compass sprite

基本

ディレクトリ構造

img
 └sprite
  └icon

sass上の指定

//インポートディレクトリの指定
@import "sprite/icon/*.png";
//スプライト実行宣言 all-末端ディレクトリ名（以降<map>）-sprite
@include all-icon-sprites;

注意点

ファイル名に半角スペースがあると動作しない

出力結果

ディレクトリ名-ファイル名{ }

任意のセレクタで指定したい場合

//インポートディレクトリの指定
@import "sprite/icon/*.png";

//<map>-sprite(ファイル名)
ul{
	li.a01{
		@include icon-sprite(Add);
	}
}

アイコンのサイズを取得

//<map>-sprite-height(ファイル名)
//<map>-sprite-width(ファイル名)
height: icon-sprite-height(Add) / 2;
width: icon-sprite-width(Add) / 2;

compass実行時にスプライトだけ実行

compass sprite "sprite/icon/*.png"

-f "hogehoge.png"でスプライト後のファイル名

sprite設定

@import前にcompass用の変数によってsprite設定を指定できる

$<map>-spacing: 120px;
$<map>-repeat: repeat-x;
$<map>-position: 30%;
$<map>-sprite-dimensions:false;
$<map>-sprite-base-class: ".action-icon"; //デフォルト<map>-spritesのファイル名を指定 
$<map>-clean-up: false;  //リビルドされた場合古いスプライト画像を消すか default:true 

$<map>-ファイル名-spacing: 30px;
$<map>-ファイル名-repeat: repeat-x;
$<map>-ファイル名-position: 30%;

hover画像系

hoge.png
hoge_hover.png

@import "sprite/icon/*.png";
a {
  @include icon-sprite(Stop)
}

a:hover, a.Stop_hover, a.Stop-hover

$disable-magic-sprite-selectors:true;

設定しておくことで止められる

sprite画像の配置

$icon-layout:diagonal;

Sampleコード

@import "compass"; $icon-spacing: 5px; $icon-repeat: repeat-x; $icon-position: 30%; $icon-sprite-dimensions:false; $icon-sprite-base-class: ".action-icon"; $icon-clean-up: true;

$icon-Add-spacing: 10px;

$icon-layout:diagonal; @import "sprite/icon/*.png"; @include all-icon-sprites;

//$disable-magic-sprite-selectors:true; a { @include icon-sprite(Stop) }

body{ color:red; }

ul{ li.a01{ @include icon-sprite(Add); } li.a02{ @include icon-sprite(Check); } li.a03{ @include icon-sprite(Help); } li.a04{ @include icon-sprite(Info); } }

ul{ li.a01{ height: icon-sprite-height(Add) / 2; width: icon-sprite-width(Add) / 2; } li.a02{ height: icon-sprite-height(Add) / 2; width: icon-sprite-width(Add) / 2; }

}

sprite画像の生成を止める方法残りの使用の確認 sprite画像全体のサイズの確認（sprite画像の名前を決められれば、image-widthで取得できる）

azusa-tomita/gist:4017215