使用网址的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);

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