Sass 和 Compass 中的背景图像路径

Posted 2023-03-06

【中文标题】Sass 和 Compass 中的背景图像路径

【英文标题】：Background images path in Sass and Compass

【发布时间】：2012-02-19 17:37:48

【问题描述】：

config.rb 文件中提到了这一点

images_dir = "images"

我在图像文件夹中的项目中使用 2 个文件夹来存放图像

images
images/background/
images/content/

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

$header-img: "sass.gif"; 

和

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

以及如何从每张背景图片中去掉这个自动生成的?1327592426？

【参考方案1】：

您应该使用image-url URL helper。它“生成相对于项目图像目录的资产的路径”，您在 config.rb 中定义。也可以将第三个参数$cache-buster设置为false，去掉生成的?1327592426

萨斯：

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

【讨论】：

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

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

@JitendraVyas 如果您不想在图像路径的开头使用正斜杠“/”，请将此行放在config.rb-文件中：relative_assets = true

@JitendraVyas 将 $cache-buster 默认设置为 false，将此行放入 config.rb asset_cache_buster :none

还值得看看罗盘的different configuration references，特别是images_dir。