Случайный цвет из массива в Sass

Question

Я хочу указать массив цветов, а затем применить цвета случайным образом к списку.

До сих пор у меня это было, так что цвета будут проходить по порядку.

Как это сделать?

Вот код Sass до сих пор:

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

и разметка:

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

Пример на Codepen: http://codepen.io/anon/pen/azbwJm

Answer 1

Во-первых, я должен указать напоминание каждому чтение что Sass предварительно скомпилирован в CSS; вы не можете добиться случайного поведения «во время выполнения» (т. е. при загрузке страницы) с помощью Sass.

Sass имеет случайную функцию(), которые могут вас заинтересовать:

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

Это выбирает случайный индекс вашего $colors массива и использует соответствующий цвет.

Интересное примечание: Sass documentation утверждает, что random($limit) «[возвращает] целое число между 1 и $limit, включая 1, но не $limit.» Однако, если вы используете nth($colors, random(length($colors) + 1)) в своей демо-версии CodePen, чтобы «восполнить» функцию random(), не выбирая самый высокий индекс, вы можете получить ошибку за использование индекса за пределами. Это предполагает, что random() действительно включает $limit.