compassのimage-urlの設定に「../img」という相対パスを設定する

compassのimage-urlの設定に「../img」という相対パスを設定したかったのでやってみました。

compassにはimage-urlという便利な機能があります。

.sample{
	background-image: image-url("compass.png");
}

scssのimage-urlの引数に画像ファイルパスを記述します。

.sample{
	background-image: url("img/compass.png");
}

出力結果は上のようになります。

上記の「img/」はconfig.rbで設定しているパスから来ています。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

h1{
background:image-url("angy1.jpg") no-repeat top left;
}

h1{
background:image-url('/img/angy1.jpg?1402918152') no-repeat top left;
}

出力結果は上のようになります。背景画像を設定していることから、画像パスをCSSフォルダから見た相対パスにする必要があります。

config.rbに一行加えます。

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

#追加
relative_assets = true

この指定はhttp_pathを設定していると意味を為しません。
CompassのURLsヘルパーが返すパスを相対パスか絶対パスのどちらにするか設定します。trueにするとCSSファイルからの相対パスを指定します。

クラスメソッドさんの参考サイトを見ると上のように書いています。relative_assetsをtrueにすると相対パスにしてくれるみたいです。

h1{
background:image-url('../img/angy1.jpg?1402918152') no-repeat top left;
}

これで相対パスが反映されたので、画像が表示されるようになりました。

not good but great