Compass Image URL Magic

Torne o uso do Compass ainda mais mágico usando seu image-url()ajudante para controlar a localização de seus ativos, simplesmente ajustando a URL para esses ativos em um local. Yay!

Arquivo de configuração da bússola ( 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