使用Rails 3.1时如何在Sass中使用参考图像？

Question

我有一个Rails 3.1项目,资产管道工作得很好.问题是我需要在Sass中引用图像,但Rails会计算图像URL.(这在生产中尤其重要,其中Rails将图像的Git哈希附加到其文件名中以填充缓存.)

例如,在app/assets/stylesheets/todos.css.scss:

.button.checkable { background-image: url(/assets/tick.png); }

当我部署(或运行rake assets:precompile)时,文件app/assets/images/tick.png被移动到public/assets/tick-48fe85c0a.png或类似的东西.这打破了CSS.这篇文章提出两点建议:

1. 不要将资产管道用于图像 - 而是将它们放入public/images/并直接引用它们
2. 将ERB用于CSS并让Rails计算出图像URL.

1号肯定是可能的,但这意味着我没有在我的图像上获得缓存破坏.2号因为我正在使用Sass而不是ERB来处理文件.

Answer 1

以下应该做的伎俩:

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

事实上,Rails提供了一堆帮助来引用资产:

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

一般来说

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

asset_type可以是以下之一:图像,字体,视频,音频,javascript,样式表

Answer 2

sass-rails gem定义了Sass函数,可以在没有ERB处理的情况下从Sass中使用. https://github.com/rails/sass-rails