ここ数年フロントエンドの高速化が話題ですが、細かい画像などフォントにしたりスプライトにすることが多いと思います。
Sass、Compassを使っているならスプライト画像の作成も行ってくれるので、方法をメモしておきます。

スプライトの生成

まずscssファイルにCompassを読み込みとスプライトを作成するディレクトリを指定します。

@import "compass";
@import "sprites/*.png"; // spritesディレクトリのpngとなる

これだけで指定したディレクトリ配下の画像をスプライトシートとして吐き出してくれちゃいます！
こんな感じに。（ちょっと見にくいですが。）

ディレクトリ構造はこうなっています。

scssでスプライトを使ってみる

よく使うオレオレmixinです。
下記のようなコードを用意しておけばスプライトを簡単に変数で呼び出すことが出来ます。

$sprites: sprite-map("sprites/*.png", $spacing: 30px);
@mixin sprite_img($name,$offset-y:+3) {
  background-image: sprite-url($sprites);;
  background-repeat: no-repeat;
  background-position: sprite-position($sprites, $name,0,$offset-y);
}

オプションの$spacing: 30pxで画像の間隔を30px開けて、sprite_imgの引数にimagesフォルダに入れた画像の名前で座標を呼び出すことが出来ます。
微調整のためy軸引数も作成しデフォルト値に+3pxを入れています。

// @include sprite_img(画像の名前, y軸の調整);

li {
  padding-left: 10px;
  @include sprite_img(icon_arrow, 5);
｝

使い方はscssにmixinとファイル名、必要があればy軸座標を渡してあげればOKですね。

オプションを詳しく

$sprites: sprite-map("sprites/*.png", [option]);

sprite-mapにカンマ区切りで設定できるオプションが色々と。

$spacing //画像同士の余白(px)
$position //x軸に沿ったスプライトの位置(%)
$layout //スプライトの並び方

$layoutの設定でスプライト画像の並び方を指定できるようです。

$layout: vertical    // 縦方向に並ぶ(デフォルト値)
$layout: horizontal  // 横方向に並ぶ
$layout: diagonal    // 斜めに並ぶ
$layout: smart       // 隙間なく並ぶ