css - 使用 url 的 sass 背景混合

Question

伙计们，我想创建一个背景混合而不是写重复的网址

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

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

我叫它

     @include bgimage(name.png);

在css中，输出是这样的错误

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

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

score 20 · Accepted Answer

尝试变量插值#{$name}

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

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

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

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

1 回答 1