SASS中的非重复随机变量

Question

我正在研究有5种颜色列表的东西，我需要在10种不同的div元素中使用这5种颜色。但是每种颜色都需要两次和随机顺序使用。使用random()函数并不能真正起作用，因为我需要数字不重复。

我现在拥有的是：

$colorList: #32ba81,#65e028,#4791e0,#f44130,#ff7811;
@mixin getColor($colorCont) {
    background-color: nth($colorList, $colorCont);
}
$j: 0;
@for $i from 1 to 6 {
    @if ($i < 6) {
        $j: $j + 1;
    }       
    .card:nth-of-type(#{random(10)}) {
        @include getColor($j);
    }
    .card:nth-of-type(#{random(10)}) {
        @include getColor($j);
    }
}

如何在不重复的情况下为nth-of-type生成10个随机数？

注意：我有2个 .card:nth-of-type同时使用两种div元素使用一种颜色。

Answer 1

有标准方法可以生成非重复的随机数。对于一组，您将阵列洗牌：

1. 将数字[0，0，1，1，2，2，3，3，4，4]放入阵列中。

2. 洗牌。如果您没有内置的阵列混音，请使用Fisher-Yates shuffle。

3. 从洗牌数组中挑选数字，使用它们为颜色索引。