使用for循环生成由多个URL形成的内容

Question

我正在尝试创建一个动态混合来为我的图像创建预加载器。生成类的上半部分运行良好，但下半部分不会。

这是代码：

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

底部的结果是：

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

但它应该是：

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

有没有办法链网址标签为标签而不是字符串？

Answer 1

使用append()函数创建列表。

@mixin preload-content($cycles) { 
    $content:(); 

    @for $i from 0 to $n { 
     $content: append($content, url('../images/logo-bg/bg#{$i + 1}.jpg')); 
    } 

    content: $content; 
}