最少混入：SVG背景和后备

Question

I'm trying to create a LESS mixin into which I can pass a text string to be used to construct an svg file name and a png file name.

My first attempt is below. Perhaps you can see what I'm trying to do.

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

Any help would be appreciated.

Updated

I just figured it out and updated the example above.

Answer 1

Just in case you don't need that many quotes, the following is equal:

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