Compassで画像のパスを自動出力する

Compassの「image-url」関数を使うことで、長い画像の参照パスを意識することなくCSSコーディングすることができます。

まずCompassの設定ファイル（config.rb）に下記設定があることを前提とします。

images_dir = "img"

Sass

.box {
  background-image: image-url("example.png");
}

出力CSS

.box {
  background-image: "../img/example.png";
}

画像へのパスを正しく出力してくれます。