サマリ：Compassで発生した問題に対処しました

Compass: 問題が生じた場合

CompassでCSSスプライトに触発されて、こんなに簡単ならやってみようかと思ったのが発端。むしろ、このためにCompassを入れたといっても良いくらい。

記述は先の記事の通り。images/spriteディレクトリを作成し、そこに記事中の画像３枚を配置。sass/screen.scssに以下を記述。

@import "sprite/*.png";
@include all-sprite-sprites(d);

.sprite-a {
  height:sprite-sprite-height(a);
  width:sprite-sprite-width(a);
}
.sprite-b {
  height:sprite-sprite-height(b);
  width:sprite-sprite-width(b);
}
.sprite-c {
  height:sprite-sprite-height(c);
  width:sprite-sprite-width(c);
}

保存後、上手くwatchできていれば、images/sprite-sb8d1dfbf8c.pngのような画像ができているはず。後はindex.html（これは作らないといけない）に、以下のように記述するだけ。

<html>
  <head>
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]>
    <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <![endif]-->
  </head>
  <body>
    <header><h1>test</h1></header>
    <div class="sprite-a">aaa</div>
  </body>
</html>

aaaと記述した箇所に「A」という画像が表示されていればOK！