title: LESS Mixin: SVG Background & fallback
body: <p>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.  </p>
  
  <p>My first attempt is below.  Perhaps you can see what I'm trying to do.</p>
  
  <pre><code>.make-bg-svg(@name){
  
    @svg: ~"../images/@{name}.svg";
    @png: ~"../images/@{name}.png";
    height: 200px;
    background: transparent url(~"@{svg}");
  
    .no-svg &amp; {
         background: transparent url(~"@{png}") no-repeat;
    }
  }
  
  // usage
  .out-of-business {
      .make-bg-svg('out-of-business');
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <h2>Updated</h2>
  
  <p>I just figured it out and updated the example above.  </p>