SASS mixinを使用して複数の背景を作成する

Question

複数の背景を生成するためにSassにmixinを作成しようとしていますが、背景の数が不明です.3,4または5でもかまいません。

@mixin multiBg($page: index, $sec: sec01,$from: 1, $to: 3, $type: jpg){ 
    $url:(); // i'm try to create a empty array first 
    $newUrl: null; // and an empty variable 
    @for $i from $from through $to { 
     $newUrl: append($url, url(../img/#{$page}/#{$sec}_bg0#{$i}.#{$type})); // then append value to variable; 
    } 
    background: $newUrl; 
} 

#sec05 { 
    @include multiBg(index,sec05); 
} 

電流出力：

background: url(../img/index/sec05_bg03.jpg); 

予想される出力：

background: url(../img/sec05_bg01.jpg),url(../img/sec05_bg02.jpg), url(../img/sec05_bg03.jpg); 

私はまだSASSをlearingてるので、私はこの問題を解決する方法がわかりません。誰かが私を啓発することはできますか？

Answer 1

あなたは正しい軌道に乗っています！しかし、あなたの構文とロジックは少しオフです。ここに私が思いついたのがあります：

@mixin multiBg($page: index, $sec: sec01, $from: 1, $to: 5, $type: jpg) { 

    $url_list:(); 

    @for $i from $from through $to { 

    // I broke constructing the url and adding it to the set into two steps here. 
    // We could do this all at once, but separating it can make it easier to read. 

    // First, generate the url. 
    $url_string: url(../img/#{$page}/#{$sec}_bg0#{$i}.#{$type}); 

    // Then add it to the list (the 'comma' part is important) 
    $url_list: append($url_list, $url_string, comma); 
    } 

    // Done looping? Output the final list! 
    background-image: $url_list; 
} 

あなたが探しているものを返すようです。ここにリスト機能のofficial docsがあります。私はいつも1つまたは2つを忘れてしまいます。

また、嫌だと言ったので、もう一度Sassmeisterをチェックしてください。素早くプロトタイプを作成して試してみるのに便利な小さなサンドボックスです。 Codepenに似ていますが、少し特殊化されています。これは私がこの質問を試してみたものです。