css - 少混合 : SVG Background & fallback

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);
}