Compass Image URL Magic

Make your usage of Compass even more magical by using its image-url() helper to control the location of your assets by simply adjusting the URL for those assets in one spot. Yay!

Compass Config File (config.rb)

#Production Assets URL
httpimagespath = "http://your-url-goes-here/img"
relative_assets = true</code></pre>

Sass Input (style.scss)
.element-selector {
    /image-url() example./
    /Compass will automatically generate a/
    /relative URL to the file./
    background: image-url("logo-sprite.png") -277px 0 no-repeat;
}</code></pre>

CSS Output (style.css)
.element-selector {
    /image-url() example./
    /Compass automatically generates a relative URL to file./
    background: url(http://your-url-goes-here/img/logo-sprite.png) -277px 0 no-repeat;
}</code></pre>

Setting the value for http_images_path (located in config.rb) will direct all your image assets to your production server, CDN or any other dark closet you’re hiding things in. It can also generate cache–busting query strings based on image timestamps. This will keep browser caches from displaying the wrong image if you change the image but not the URL.

Take the config.rb example from above one step further and uncomment the relative_assets line while working locally like so;

Compass Config File (config.rb)
httpimagespath = "http://your-url-goes-here/img"
relative_assets = true</code></pre>

relative_assets will now serve all the assets from your local assets/images directory that’s defined by your config.rb seen below.

Compass Config File (cont.)
#Relative Project Assets Location
cssdir = "/"
sassdir = "scss"
imagesdir = "img"
javascriptsdir = "js"</code></pre>

Feel free to read more on my blog about image-url()
http://blog.grayghostvisuals.com/compass/image-url