使用网址的sass背景mixins

Question

伙计们我想创建一个背景mixin而不是写重复的url

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

并且，它永远不接受$ name变量

的值

我叫它

     @include bgimage(name.png);

并且在css中输出错误，如此

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

有没有办法在mixin中写入网址？如何以简短的方式做到这一点

Answer 1

尝试使用#{$name}

的变量插值

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

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

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

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