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の引数に画像ファイルパスを記述します。
config.rbでパスの設定
上記の「img/」はconfig.rbで設定しているパスから来ています。
・参考
【Webデザイナ-・コーダー向け】すぐに使えるSCSS入門|設定ファイルを知っておこう – 番外編 | DevelopersIO
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; }
これで相対パスが反映されたので、画像が表示されるようになりました。