在sass中使用image-url来避免硬编码图像资源路径

Question

我刚刚开始使用rails资产管道，我是一个前端人员。 我正在尝试在sass文件中使用image-url helper，这样我就不必对路径进行硬编码。

以下 SASS

.some-class
  background: image-url("image.png")

生成以下 CSS

.some-class{
  background: url("asset/image.png");
}

如何使用image-url helper生成以下css，而无需对图像路径进行硬编码？

.some-class{
  background: url("asset/image.png") no-repeat 0 0 #fff;
}

Answer 1

你可以使用，

.some-class
  background-image: image-url("image.png")
  background-repeat: no-repeat;
  background-color: #fff;

等等。

或

 background: #fff image-url("image.png") no-repeat 0 0;

应该有用。

Answer 2

你应该使用：

background-image: asset-url("image.png", image) no-repeat 0 0 #fff;

asset-url是一个sass / rails功能，它允许资产管道为您完成一些（生产）工作。您可以阅读该功能here。

使用帮助程序优于普通url("image.png")，因为它可以在生产中为您提供指纹打印的URL。请参阅this StackOverflow answer。