Compassを使った環境ごとの画像URLの書き換え

Compassを使ってCSS内の画像パスを開発環境と本番環境で切り替える方法です。

config.rb

css_dir = "src/main/webapp/css/"
sass_dir = "src/main/webapp/scss/"
images_dir = "src/main/webapp/"
output_style = :compressed

DEV= 'http://dev.stat.example.jp/hoge/'
PRD = 'http://stat.example.jp/hoge/'

http_images_path = (environment == :production) ? PRODUCT : STAGING 

こんな感じで画像ファイルの配置先を指定します。

でscssの中で画像パスを記述する部分を下記のように記述します。

@charset "UTF-8";
.bar {
    background: #0A7995 image-url("ratio20/images/hoge.png") no-repeat center center;
}

今までurl("hoge")と記述していた部分をimage-url("hoge")に変えると、compassが自動で環境に合わせたパスを追記してくれます。

compass compile -e production --force

こんなコマンドで環境を指定します。

便利