Sass和Compass中的背景图片路径

Question

这在config.rb文件中提到

images_dir = "images"

我的项目中在images文件夹内使用了2个文件夹来存放图片

images
images/background/
images/content/

如果任何图像都在 images/background/ 文件夹中，那么我应该如何在 css 的 background 和 Sass 变量中添加图像的路径？

$header-img: "sass.gif"; 

和

background-image: url('sass.gif?1327592426');

如何去掉每个背景图片中自动生成的?1327592426代码?

- Jitendra Vyas

Answer 1

你应该使用 image-url URL辅助工具。它“生成了到项目图像目录相关资源的路径”，您可以在config.rb中定义。您也可以将第三个参数$cache-buster设置为false以删除生成的?1327592426。

Sass：

// image-url arguments:
// $path: path relative to images directory in config.rb
// $path-only: if true, will cause only the path to be returned instead of a `url()` function
// $cache-buster: When set to `false` no cache buster will be used (i.e. `?313420982`)
$header-img: image-url('background/sass.gif', false, false)
background-image: $header-img

生成的 CSS：

background-image: url('images/background/sass.gif')

- maxbeatty

---

如果我使用 $header-img: image-url('background/sass.gif', false, true)，它会给出 background-image: url('/images/url('/images/background/sass.gif')');。 - Jitendra Vyas

刚刚更新了答案，以便更清楚地使用$header-img。如果您想在Sass中使用url()定义background-image，请将第二个参数设置为true。然后，在Sass中编写background-image: url($header-img)。 - maxbeatty

@JitendraVyas 如果您不想在图像路径的开头加上斜杠'/',请将此行放入config.rb文件中：relative_assets = true。 - ndequeker

@JitendraVyas 如果要将$cache-buster默认设置为false，请在您的config.rb中添加以下行：asset_cache_buster :none。 - ndequeker

同时也值得一看compass的不同配置参考，特别是images_dir。 - Izhaki