title: Generate content formed by multiple URLs with for loop
body: <p>I'm trying to create a dynamic mixin to create a preloader for my images. The upper part that generate the classes works well, but the lower part won't.</p>
  
  <p>This is the code:</p>
  
  <pre class="lang-sass prettyprint-override"><code>$n: 5;
  $step: 100 / $n;
  
  @keyframes logo-bg-change {
      @for $i from 0 to $n {
          $current-frame: $step * $i;
  
          #{$current-frame}% {
              background-image: url('../images/logo-bg/bg#{$i + 1}.jpg');
          }
      }
  }
  
  @mixin preload-content($cycles) {
      $content: '';
  
      @for $i from 0 to $n {
          $content: $content + ' ' + url('../images/logo-bg/bg#{$i + 1}.jpg');
      }
  
      content: $content;
  }
  
  body:after {
      display: none;
      @include preload-content($n);
  }
  </code></pre>
  
  <p>The result of the bottom part is:</p>
  
  <pre class="lang-css prettyprint-override"><code>body: after {
      display: none;
      content: ' url("../images/logo-bg/bg1.jpg") url("../images/logo-bg/bg2.jpg") url("../images/logo-bg/bg3.jpg") url("../images/logo-bg/bg4.jpg") url("../images/logo-bg/bg5.jpg")';
  }
  </code></pre>
  
  <p>But it should be:</p>
  
  <pre class="lang-css prettyprint-override"><code>body:after {
      display: none;
      content:
          url('../images/logo-bg/bg1.jpg')
          url('../images/logo-bg/bg2.jpg')
          url('../images/logo-bg/bg3.jpg')
          url('../images/logo-bg/bg4.jpg')
          url('../images/logo-bg/bg5.jpg');
  }
  </code></pre>
  
  <p>Is there a way to chain URLs tags as tags and not as strings?</p>