title: LESS:: css rules inside media queries dont append values on looping
body: <p>I want a mixin to input multiple background image urls to generate 1x and 2x background image rules.</p>
  
  <p><strong>Definition::</strong></p>
  
  <pre><code>.multiple-bg(...) {
      @len: length(@arguments);
      @i: 1;
  
      .generate(@list, @i) when (@i &lt;= @len) {
          @src : extract(@list, @i);
          background-image+: ~'url("@{src}")';
  
          @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{src})[1]`;
          @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{src})[2]`;
  
          @media only screen and (-webkit-min-device-pixel-ratio: 2) {
              background-image+: ~`"url(@{filename}@2x.@{extension})"`;
          }
          .generate(@list, @i + 1);
      }
      .generate(@arguments, @i);
  }
  </code></pre>
  
  <p><strong>Usage::</strong>  </p>
  
  <pre><code>selector {
    .multiple-bg("link1.jpg", "l1nk2.jpg", "link3.jpg", "l1nk4.jpg");
  }
  </code></pre>
  
  <p><strong>Output::</strong></p>
  
  <pre><code>selector {
    background-image: url("link1.jpg"), url("l1nk2.jpg"), url("link3.jpg"), url("l1nk4.jpg");
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    selector {
      background-image: url(link1@2x.jpg);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    selector {
      background-image: url(l1nk2@2x.jpg);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    selector {
      background-image: url(link3@2x.jpg);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    selector {
      background-image: url(l1nk4@2x.jpg);
    }
  }
  </code></pre>
  
  <p>The output is as expected for the 1x rule but for the 2x rule which involves a media query it doesnt combine the urls but creates seperate media query for all.</p>
  
  <p>i have used the "+" operator mentioned in the less language features to do this. <a href="http://lesscss.org/features/#merge-feature-space" rel="nofollow">http://lesscss.org/features/#merge-feature-space</a></p>
  
  <p>can anyone suggest a solution, any approach is fine.</p>