Colore casuale da matrice in Sass

Question

Voglio specificare una matrice di colori e quindi applicare i colori in modo casuale a un elenco.

Finora ce l'ho in modo che i colori scorrano in ordine.

Come posso randomizzarlo?

Ecco il codice Sass finora:

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

e la marcatura:

<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> 

Esempio su Codepen: http://codepen.io/anon/pen/azbwJm

Answer 1

In primo luogo, vorrei affermare un promemoria per tutti la lettura che Sass è precompilato in CSS; non è possibile ottenere un comportamento casuale "in fase di esecuzione" (ad esempio caricamento a pagina) utilizzando Sass.

Sass ha una funzione random() che potrebbe interessarti:

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

Questo sceglie un indice casuale di $colors array e usa il colore associato.

Nota interessante: la Sass documentation afferma che random($limit) "[ritorna] un numero intero compreso tra 1 e $limit, comprensivi di 1 ma non $limit." Tuttavia, se si utilizza nth($colors, random(length($colors) + 1)) nella demo CodePen per "compensare" la funzione random() senza scegliere l'indice più alto, è possibile che venga visualizzato un errore per l'utilizzo di un indice fuori limite. Ciò suggerirebbe che random() includa effettivamente $limit.