not good but great

プログラミング、アート、映画・本の感想について書きます。

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

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

image-url

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

・参考
Compassの画像の関数(Image Helpers)| Web制作者のためのSassの教科書 - 公式サポートサイト

scss

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

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

css

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

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

config.rbでパスの設定

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

・参考
【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|設定ファイルを知っておこう – 番外編 | Developers.IO

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

「../img」という相対パスを用いる

scss

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

css

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

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

relative_assetsを使う

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;
}

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