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

我刚开始使用rails资产管道，我是一名前端人员。我想在sass文件中使用image-url助手，这样我就不必硬编码路径。在sass中使用image-url以避免硬编码图像资产路径

以下SASS

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

生成以下CSS

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

如何使用图像URL帮手生成以下CSS，没有硬编码图像路径？

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

来源

2013-04-12 Chandrakant

我在这里错过了什么吗？解决方案看起来很明显：'background：image-url（“image.png”）no-repeat 0 0 #fff;' – cimmanon

我也尝试过这一个，不是为我工作..给某种错误..！ – Chandrakant

什么是错误？ – cimmanon

-1

您propably应该使用：

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

资产的URL是SASS /轨功能，它可以让资产管道做一些（生产）为你工作。你可以阅读关于该功能here。

使用助手比简单的url("image.png")更可取，因为它可以在生产中为您提供指纹打印的URL。请参阅this StackOverflow answer。

来源

2013-04-14 23:02:19 tessi

我曾试过它，不适合我 – Chandrakant

它应该工作，什么是excat错误？也许可以用'image-url（'image.png'）'替换'asset-url（“image.png”，image）''。 – tessi

你可能想看看下面的StackOverflow问题：http://stackoverflow.com/questions/9304607/sass-rails-helpers-image-url-asset-url-are-not-working-in-rails- 3-2-1？rq = 1 它提供了一些额外的指针（特别是您的文件包含在资源预编译列表中？） – tessi

可以使用，

.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;

应该工作。

来源

2013-04-15 07:02:01

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

回答

相关问题