Zufällige Farbe aus Array in Sass

Question

Ich möchte ein Array von Farben angeben und dann die Farben zufällig auf eine Liste anwenden.

Bisher habe ich es so, dass die Farben nacheinander durchlaufen werden.

Wie kann ich es randomisieren?

Hier ist der Code Sass bisher:

$colors: red, orange, yellow, green, blue, purple; 

@for $i from 1 through length($colors) { 
    li:nth-child(#{length($colors)}n+#{$i}) { 
     background: lighten(nth($colors, $i), 20%); 
    } 
} 

li { 
    list-style: none; 
    padding: 1em; 
} 

und das Markup:

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
    <li>g</li> 
    <li>h</li> 
    <li>i</li> 
    <li>j</li> 
    <li>k</li> 
    <li>l</li> 
</ul> 

Beispiel auf Codepen: http://codepen.io/anon/pen/azbwJm

Answer 1

Zuerst habe ich eine Erinnerung an alle angeben sollte lesen dass Sass in CSS vorkompiliert ist; Sie können kein zufälliges Verhalten "zur Laufzeit" (d. h. beim Laden der Seite) mit Sass erreichen.

Sass hat eine random() Funktion, die Sie interessieren könnten:

$colors: red, orange, yellow, green, blue, purple; 
$repeat: 20 // How often you want the pattern to repeat. 
// Warning: a higher number outputs more CSS. 

@for $i from 1 through $repeat { 
    li:nth-child(#{length($colors)}n+#{$i}) { 
     background: lighten(nth($colors, random(length($colors))), 20%); 
    } 
} 

li { 
    list-style: none; 
    padding: 1em; 
} 

Dies wählt einen zufälligen Index Ihrer $colors Array und verwendet die zugehörige Farbe.

Interessante Anmerkung: die Sass documentation besagt, dass random($limit) "[Rückkehr] eine ganze Zahl zwischen 1 und $limit, einschließlich 1, aber nicht $limit." Wenn Sie in Ihrer CodePen-Demo jedoch nth($colors, random(length($colors) + 1)) verwenden, um die Funktion "random()" zu ersetzen, die den höchsten Index nicht auswählt, können Sie einen Fehler bei der Verwendung eines Index außerhalb der zulässigen Grenzen erhalten. Dies würde nahe legen, dass random() tatsächlich $limit enthält.