Erstellen Sie mehrere Hintergrund mit SASS Mixin

Question

Ich versuche, ein Mixin in Sass zu erstellen, mehrere Hintergrund zu generieren, Problem ist die Anzahl der Hintergrund ist unknow, es kann 3, 4 oder sogar 5 sein. Hier, was ich versuche und scheitere.

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

Stromausgang:

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

erwartete Ausgabe:

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

Ich weiß nicht, wie dieses Problem zu beheben, da ich SASS bin immer noch learing. Kann mir bitte jemand aufklären?

Answer 1

Sie sind auf dem richtigen Weg! Aber deine Syntax und Logik sind etwas aus. Hier ist, was ich mit kam:

@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; 
} 

Das scheint zurück, was Sie suchen. Hier sind die official docs auf Liste Funktionen - ich vergesse immer ein oder zwei, kann auch für Sie nützlich sein.

Auch, da Sie erwähnt, dass Sie neu sind zu sass - überprüfen Sie Sassmeister, wenn Sie nicht bereits haben. Es ist eine handliche kleine Sandbox für schnelles Prototyping und Ausprobieren von Sachen. ähnlich wie Codepen aber ein bisschen mehr spezialisiert. Es ist das, was ich benutzt habe, um mit dieser Frage zu experimentieren.