Sass背景混合使用url

Question

Sass背景混合使用url

6

大家好，我想创建一个背景混合（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？或者有什么简便的方法可以实现？

- Vivek Vikranth

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

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabrizio Calderan · Accepted Answer

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

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

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

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

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