LESS Mixin：SVG背景＆amp;倒退

Question

我正在尝试创建一个LESS mixin，我可以传递一个文本字符串来构造一个svg文件名和一个png文件名。

我的第一次尝试如下。也许你可以看到我想要做的事情。

.make-bg-svg(@name){

  @svg: ~"../images/@{name}.svg";
  @png: ~"../images/@{name}.png";
  height: 200px;
  background: transparent url(~"@{svg}");

  .no-svg & {
       background: transparent url(~"@{png}") no-repeat;
  }
}

// usage
.out-of-business {
    .make-bg-svg('out-of-business');
}

任何帮助都将不胜感激。

更新

我刚想出来并更新了上面的例子。

Answer 1

万一你不需要那么多报价，以下是相同的：

.make-bg-svg(@name) {

  @svg: ~"../images/@{name}.svg";
  @png: ~"../images/@{name}.png";
  height: 200px;
  background: transparent url(@svg);

  .no-svg & {
       background: transparent url(@png) no-repeat;
  }
}

// usage
.out-of-business {
    .make-bg-svg(out-of-business);
}