使用url的sass背景混合[重复]答案

【问题标题】：sass background mixins using url [duplicate]使用url的sass背景混合[重复]
【发布时间】：2013-07-25 03:59:40
【问题描述】：

伙计们，我想创建一个后台 mixin，而不是编写重复的 url

 @mixin bgimage($name){
  $url:"../images/$name.png";
 background: url($url);}

而且，它从不接受 $name 变量的值

我叫它

     @include bgimage(name.png);

在 css 中输出是这样的错误

     background: url("../images/$name.png");

有什么办法可以在 mixin 中写入 url 吗？ ot如何在短时间内做到这一点

【问题讨论】：

fcalderan 的解决方案甚至可以通过忽略单独的 $url 变量的声明来稍微简洁一些。将目标 URL 保存在自己的变量中并没有真正带来任何额外的好处，因为它（至少在这种情况下）只使用一次。 @mixin bgimage($name) { background: url("../images/#{$name}.png"); }

【解决方案1】：

尝试使用#{$name}的变量插值

@mixin bgimage($name) {
  $url:"../images/#{$name}.png";
  background: url($url);
}

并将文件名（不带扩展名）作为 mixin 参数传递：

@include bgimage(your-png-file-without-extension);

因为它已经附加在你的 mixin 的 $url 变量中

【讨论】：