使用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; 
}