vendredi 9 février 2018

Non repeatable random variable in SASS

I'm working on something where I have a list of 5 colors and I need to use these 5 color in 10 different div elements. But each color needs to be used twice and in a random order. Using the random() function doesn't really work because I need the numbers not to repeat.

What I have for now is this:

$colorList: #32ba81,#65e028,#4791e0,#f44130,#ff7811;

@mixin getColor($colorCont) {
    background-color: nth($colorList, $colorCont);
}

$j: 0;

@for $i from 1 to 5 {
    $j: $j + 1;        
    .card:nth-of-type(#{random(10)}) {
        @include getColor($j);
    }
    .card:nth-of-type(#{random(10)}) {
        @include getColor($j);
    }
}

How can I generate 10 random numbers for nth-of-type without them repeating?

Note: I have 2 .card:nth-of-type to use one color in two div elements at the same time.




Aucun commentaire:

Enregistrer un commentaire