How do I use reference images in Sass when using Rails 3.1?

ruby-on-rails css ruby-on-rails-3 sass sprockets

The following should do the trick:

.button.checkable { background-image: url(image_path('tick.png')); }

Rails in fact provides a bunch of helpers to reference the assets:

image-url('asset_name')audio-path('asset_name')

In general

[asset_type]-url('asset_name') #Becomes url('assets/asset_name')[asset_type]-path('asset_name') #Becomes 'assets/asset_name'

asset_type may be one of the following: image, font, video, audio, javascript, stylesheet

ruby-on-rails css ruby-on-rails-3 sass sprockets

sass-rails gem defines Sass functions that can be used from Sass, without ERB processing.https://github.com/rails/sass-rails

ruby-on-rails css ruby-on-rails-3 sass sprockets

For those who are in favor for faster load times for users, may I suggest following Steve Souders tip for loading images in CSS in base64.

asset-data-url('path')

CodeHunter