Sass 的图像路径中有变量吗？答案

【问题标题】：Have a variable in images path in Sass?Sass 的图像路径中有变量吗？
【发布时间】：2012-01-26 08:49:08
【问题描述】：

我希望在我的 CSS 文件中拥有一个包含所有图像的根路径的变量。我不太清楚这在纯 Sass 中是否可行（实际的 Web 项目不是 RoR，所以不能使用 assets_pipeline 或任何花哨的爵士乐）。

这是我的例子，它不起作用。在编译时，它会在后台 url 属性中的第一个变量实例说 ("Invalid CSS after "..site/background": expected ")") 时犹豫不决。

定义函数返回路径：

//Vars
$assetPath : "/assets/images";

//Functions
@function get-path-to-assets($assetPath){
  @return $assetPath;
}

使用函数：

body {
  margin: 0 auto;
  background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

任何帮助将不胜感激。

【问题讨论】：

标签： css sass

【解决方案1】：

您尝试过Interpolation 语法吗？

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

【讨论】：

它对我不起作用，因为 CssVariablesProcessor 不处理变量，即使它在 CssDataUriPreProcessor 之前设置为预处理器
也适用于引用路径，例如在 compass font-face mixin 中。 '#{$fontName}.ext', ..
是的，最好在引用路径中使用。否则它会在 netbeans IDE 中显示错误。 url("#{$get-path-to-assets}/site/background.jpg")

【解决方案2】：

不需要函数：

$assetPath : "/assets/images";

...

body {
  margin: 0 auto;
  background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

详情请参阅interpolation docs。

【讨论】：

绝对喜欢简洁直接指向变量
如果您在 @import 中使用它，您需要添加 'url(' 和 ')' 以使插值工作。更多信息sass-lang.com/documentation/at-rules/import#plain-css-imports

【解决方案3】：

一直在寻找相同问题的答案，但认为我找到了更好的解决方案：http://blog.grayghostvisuals.com/compass/image-url/

基本上，您可以在 config.rb 中设置图像路径并使用 image-url() 帮助器

【讨论】：

【解决方案4】：

为上述正确答案添加一些内容。我正在使用 netbeans IDE，它在使用 url(#{$assetPath}/site/background.jpg) 这个方法时显示错误。这只是 netbeans 错误，sass 编译没有错误。但是这个错误会破坏 netbeans 中的代码格式，并且代码变得丑陋。但是当我在下面这样的引号中使用它时，它会显示出奇迹！

url("#{$assetPath}/site/background.jpg")

【讨论】：

【解决方案5】：

我们可以使用相对路径代替绝对路径：

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }

【讨论】：