CSS 使用 Rails 3.1 时如何在 Sass 中使用参考图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6393315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use reference images in Sass when using Rails 3.1?
提问by James A. Rosen
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.)
我有一个 Rails 3.1 项目，资产管道运行良好。问题是我需要在我的 Sass 中引用图像，但 Rails 计算图像 URL。（这在生产环境中尤为重要，Rails 将图像的 Git 哈希附加到其文件名以破坏缓存。）
For example, in app/assets/stylesheets/todos.css.scss:
例如，在app/assets/stylesheets/todos.css.scss：
.button.checkable { background-image: url(/assets/tick.png); }
When I deploy (or run rake assets:precompile), the file app/assets/images/tick.pngis moved to public/assets/tick-48fe85c0a.pngor something similar. This breaks the CSS. This postmakes two suggestions:
当我部署（或运行rake assets:precompile）时，文件app/assets/images/tick.png被移动到public/assets/tick-48fe85c0a.png或类似的东西。这打破了 CSS。这篇文章提出了两个建议：
- don't use the asset pipeline for images -- instead put them in
public/images/and reference them directly - use ERB for your CSS and let Rails work out the image URL.
- 不要将资产管道用于图像——而是将它们放入
public/images/并直接引用它们 - 为您的 CSS 使用 ERB，并让 Rails 计算出图像 URL。
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.
数字 1 肯定是一种可能性，尽管这意味着我的图像不会被缓存破坏。第 2 条已出局，因为我使用的是 Sass，而不是 ERB 来处理文件。
回答by Topo
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:
Rails 实际上提供了一堆帮助器来引用资产：
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
asset_type 可以是以下之一：图像、字体、视频、音频、javascript、样式表
回答by Kliment Mamykin
sass-rails gem defines Sass functions that can be used from Sass, without ERB processing. https://github.com/rails/sass-rails
sass-rails gem 定义了可以从 Sass 中使用的 Sass 函数，无需 ERB 处理。 https://github.com/rails/sass-rails
回答by Alex Grande
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.
对于那些支持用户更快加载时间的人，我可以建议按照 Steve Souders 提示在 base64 中加载 CSS 中的图像。
asset-data-url('path')
资产数据网址（'路径'）
回答by mu is too short
A variant of option 2 will work. If you have something like this:
选项 2 的变体将起作用。如果你有这样的事情：
app/assets/stylesheets/pancakes_house.css.less.erb
And you requireit into your application.cssfile. Then pancakes_housegoes 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.
然后你require把它放到你的application.css文件里。然后pancakes_house首先通过 ERB，该输出通过 LESS 处理器，然后输出的任何内容都会进入您的 CSS。将 ERB 放在您的 SCSS 中可能会感觉有点奇怪，但是，嘿，它可以工作并完成工作而不会太奇怪。
So you should be able to get at the necessary methods to produce your cache-busting image paths through your ERB.
因此，您应该能够获得通过 ERB 生成缓存破坏图像路径的必要方法。
I only tried this with a Less file but it should work with .css.scss.erbas well.
我只用 Less 文件尝试过这个，但它也应该可以使用.css.scss.erb。
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.
此模块中的方法可从 SassScript 上下文访问。例如，你可以写
$color = hsl(120deg, 100%, 50%)它会调用
Sass::Script::Functions#hsl.
There are even some instructions on writing your own functionsa little further down in the manual. However, I'm not sure how to get Sprockets to load your Sass::Script::Functionspatches 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.
手册中甚至还有一些关于编写自己的函数的说明。但是，我不确定如何让 Sprockets 加载您的Sass::Script::Functions补丁，所以我不能称之为实用的解决方案；比我更强大的 Sprocket Fu 的人可能能够使这种方法起作用，我认为这比 ERBified SCSS 更优雅。
回答by Lev Lukomsky
You can use Number 2 easily, just add .erbextension to your .scssfile:
您可以轻松使用 Number 2，只需.erb为您的.scss文件添加扩展名：
app/assets/stylesheets/todos.css.scss.erb
and use asset_pathmethod to get path to image with hash:
并使用asset_path方法获取带有哈希的图像路径：
.button.checkable { background-image: url('<%= asset_path 'tick.png' %>'); }
this file will be processed by erband then by sass.
该文件将由erb处理，然后由sass 处理。
回答by oroyo segun
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.
使用资产管道时，必须重写资产的路径，并且 sass-rails 为以下资产类提供 -url 和 -path 帮助器（在 Sass 中用连字符表示，在 Ruby 中用下划线表示）：图像、字体、视频、音频、JavaScript 和样式表。
image-url("rails.png") returns url(/assets/rails.png) image-path("rails.png") returns "/assets/rails.png"
image-url("rails.png") 返回 url(/assets/rails.png) image-path("rails.png") 返回 "/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"
资产 url("rails.png") 返回 url(/assets/rails.png) 资产路径("rails.png") 返回 "/assets/rails.png"
