Css SASS中的非重复随机变量

Css SASS中的非重复随机变量,css,random,sass,repeat,Css,Random,Sass,Repeat,我正在做一些事情,我有一个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

我正在做一些事情,我有一个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);
    }
}
$colorList:#32ba81,#65e028,#4791e0,#f44130,#ff7811;
@混合getColor($colorCont){
背景色:n($colorList,$colorCont);
}
$j:0;
@从1美元到6美元{
@如果($i<6){
$j:$j+1;
}       
.card:n个类型(#{random(10)}){
@包括getColor($j);
}
.card:n个类型(#{random(10)}){
@包括getColor($j);
}
}
如何为类型的第n个
生成10个随机数而不重复


注:我有2张
.card:n类型
可以在两个
div
元素中同时使用一种颜色。

有标准的方法来生成不重复的随机数。对于一个小集合,您可以洗牌一个数组:

  • 将数字[0,0,1,1,2,2,3,3,4]放入一个数组中

  • 洗牌数组。如果没有内置阵列随机播放,请使用随机播放

  • 从无序排列的数组中选取数字,用它们来索引颜色


  • 有一些标准方法可以生成不重复的随机数。对于一个小集合,您可以洗牌一个数组:

  • 将数字[0,0,1,1,2,2,3,3,4]放入一个数组中

  • 洗牌数组。如果没有内置阵列随机播放,请使用随机播放

  • 从无序排列的数组中选取数字,用它们来索引颜色


  • 我理解这个想法,我只是不知道SASS是否有足够的工具让我以这种方式实现。尝试以列表的形式实现数组。对于F-Y洗牌,您需要能够交换列表中的两个元素。这可能需要一个额外的变量,或者您可能需要一个完整的第二个列表来进行交换。谢谢你的帮助,这将是目前唯一可能做的事情。我找到了一个方法。就在这里,我理解这个想法,我只是不知道SASS是否有足够的工具让我以这种方式实现。试着以列表的形式实现数组。对于F-Y洗牌,您需要能够交换列表中的两个元素。这可能需要一个额外的变量,或者您可能需要一个完整的第二个列表来进行交换。谢谢你的帮助,这将是目前唯一可能做的事情。我找到了一个方法。在这里