Случайный цвет из массива в Sass [дубликат]

этот вопрос уже есть ответ здесь:

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

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

Как я могу рандомизации это?

вот код 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

8
random sass

1 ответов

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

Sass имеет функцию random (), которая может вас заинтересовать:

$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 array и использует связанный цвет.

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

12