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;你无法实现随机行为＆＃34;在运行时＆＃34; （即在页面加载时）使用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数组的随机索引并使用相关的颜色。

有趣的提示：Sass documentation表示random($limit)＆＃34; [返回] 1到$limit之间的整数，包括1但不是$limit ＆＃34;但是，如果您在CodePen演示中使用nth($colors, random(length($colors) + 1))来＆＃34;弥补＆＃34;如果random()函数没有选择最高索引，则使用索引超出范围会导致错误。这表明random()确实包含$limit。

Sass中阵列的随机颜色

1 个答案: