Compassを導入したいと思ってその準備で調査。
公式のドキュメント見ればいいんだけどやっぱり手を動かしておいた方がいいので。
index.html
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheets/sandbox.css">
<body>
<div>
<p>Compass!</p>
<ul>
<li class="icons-brick">on compilcation error</li>
<li class="icons-brick_link">custome class name for sprites</li>
<li class="musi">bug</li>
</ul>
</div>
</body>
スプライトユーティリティの使い方
$ ls images/icons/
brick.png find.png ruby.png
brick_link.png macFFBgHack.png tag_green.png
bug.png package.png wrench.png
bullet_black.png page_green.png wrench_orange.png
bullet_toggle_minus.png page_white_text.png zoom.png
bullet_toggle_plus.png page_white_width.png
date.png plugin.png
sass/sandbox.scss
@import "compass";
@import "icons/*.png";
@include all-icons-sprites;
-
@import "icons/*.png;"でicons/*.pngを全部繋げたスプライト画像が作られる。 -
@include all-icons-sprites;をすると、自動でclassと画像とが対応付けられる。
-
<li class="icons-brick">に対してはimages/icons/brick.pngが割り当てられる。 - all-icons-spritesのiconsはディレクトリー名
クラス名をカスタマイズする
sass/sandbox.scss
.musi {
@include icons-sprite(bug);
}
と、@include ****-sprite(クラス名)とすると、ディレクトリー名プリフィクス（icons-）無しで、任意のclass名（musi）が使える。
bugはimages/bug.pngのbug。
複数形に注意
sass/sandbox.scss
.musi {
@include icons-sprites(bug);
}
とspriteを複数形にしてしまうと
stylesheets/sandbox.css
.musi .icons-bug {
background-position: 0 -16px;
}
と、セレクター二つの組み合わせになってしまうので注意。
画像ファイルを弄っても更新されない
画像ファイルだけを編集したり追加したりしても、スプライトは再作成されない。
何らかのSCSSファイルを弄ったりtouchコマンドで触る必要があるので注意。
コンパイルエラー時のフック（通知など）
http://qiita.com/items/96953b4b767753162875
に書いたように、compass watchしている間にコンパイルエラーがあったらIRCなどに通知したい。
config.rbを使う。
config.rb
on_stylesheet_error do |filename, message|
$stderr.puts 'ERROR OCCURED!!!'
# or notify via IRC and so on
$stderr.puts "#{filename}: #{message}"
end
これでCompass導入もできるようになったと思う。
ちゃんと使い方説明できればね。