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

Question

I have a Rails 3.1 project with the asset pipeline working great. The problem is that I need to reference images in my Sass, but Rails calculates image URLs. (This is partic

Answer 1

A variant of option 2 will work. If you have something like this:

app/assets/stylesheets/pancakes_house.css.less.erb

And you require it into your application.css file. Then pancakes_house goes through ERB first and that output goes through the LESS processor and whatever comes out of that goes into your CSS. Putting ERB inside your SCSS might feel a little odd but, hey, it'll work and get the job done without too much weirdness.

So you should be able to get at the necessary methods to produce your cache-busting image paths through your ERB.

I only tried this with a Less file but it should work with .css.scss.erb as well.

---

As an aside, you can also add your own functions to SASS:

Methods in this module are accessible from the SassScript context. For example, you can write

$color = hsl(120deg, 100%, 50%)

and it will call Sass::Script::Functions#hsl.

There are even some instructions on writing your own functions a little further down in the manual. However, I'm not sure how to get Sprockets to load your Sass::Script::Functions patches so I can't call this a practical solution; someone with stronger Sprocket Fu than me might be able to make this approach work though and I'd call this more elegant than ERBified SCSS.

Answer 2

You can use Number 2 easily, just add .erb extension to your .scss file:

app/assets/stylesheets/todos.css.scss.erb

and use asset_path method to get path to image with hash:

.button.checkable { background-image: url('<%= asset_path 'tick.png' %>'); }

this file will be processed by erb and then by sass.

Answer 3

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

Answer 4

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')

https://github.com/rails/sass-rails#asset-helpers

Answer 5

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

Answer 6

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

image-url("rails.png") returns url(/assets/rails.png) image-path("rails.png") returns "/assets/rails.png"

The more generic form can also be used:

asset-url("rails.png") returns url(/assets/rails.png) asset-path("rails.png") returns "/assets/rails.png"