Simplify image paths with image_url()
Recently Compass introduced a Sass method called image_url() which allows you to refer to images by their file name only. When the Sass is compiled, the CSS url() method is populated with a path generated by Compass.
When you start a new project using the compass command-line tool, it will generate a config.rb file which contains options specific to your new project. There is a variable called httpimagespath which is used by Compass to generate the correct image paths. I have the value setup for this site as such
http_images_path = "/wp-content/themes/default/images/"
Now when I use the image_url() method for the header on this site:
h1
background= image_url("title-embellishment.gif") "no-repeat" 17px 7px
It will generate this CSS:
h1 {
background: url(/images/title-embellishment.gif) no-repeat 17px 7px; }
This makes it trivial to change image paths for the entire site with one line in config.rb. Never again worry about relative paths, ../../images/ and the like.