title: How do I use reference images in Sass when using Rails 3.1?
body: <p>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 particularly important in production, where Rails appends the Git hash of the image to its filename to bust caches.)</p>
  
  <p>For example, in <code>app/assets/stylesheets/todos.css.scss</code>:</p>
  
  <pre><code>.button.checkable { background-image: url(/assets/tick.png); }
  </code></pre>
  
  <p>When I deploy (or run <code>rake assets:precompile</code>), the file <code>app/assets/images/tick.png</code> is moved to <code>public/assets/tick-48fe85c0a.png</code> or something similar. This breaks the CSS. <a href="https://moocode.com/posts/1-deploying-a-rails-3-1-application-to-production">This post</a> makes two suggestions:</p>
  
  <ol>
  <li>don't use the asset pipeline for images -- instead put them in <code>public/images/</code> and reference them directly</li>
  <li>use ERB for your CSS and let Rails work out the image URL.</li>
  </ol>
  
  <p>Number 1 is certainly a possibility, though it means I don't get cache-busting on my images. Number 2 is out because I'm using Sass, not ERB to process the files.</p>