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 http_images_path 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:
:::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.
Comments?
Let me know at thomas@awardwinningfjords.com and I'll amend the article as necessary.