css - scss - randomize in loop

Question

I am trying to translate this

.snowflake:nth-of-type(0) {
  left: 1%;
  animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
  left: 40%;
  animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
  left:80%;
  animation-delay: 6s, 0.5s;
}

to translate and randomize it into scss like

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

$total: 2;

@for $i from 1 through $total {
  .snowflake:nth-of-type(#{$i}) {
    left: percentage($i/$total);
    animation-delay: random_range(0, 8), random_range(0, 2);
  }
}

I somehow can't get the random_range function to go properly. I'd appreciate a hint.

Answer 1

Can't figure out, why the above was not working as expected in Vue app. Made it work with

@function random-decimal($max) {
  @return random($max) / 10;
}

@mixin random-animation-delay(
  $anim1: random-decimal(80),
  $anim2: random-decimal(25)
) {
  -webkit-animation-delay: $anim1 + s, $anim2 + s;
  animation-delay: $anim1 + s, $anim2 + s;
}

$snowflakes: 15;

@for $i from 1 through $snowflakes {
  .snowflake:nth-of-type(#{$i}) {
    left: random(100) + vw;
    margin-left: -40px;
    @include random-animation-delay();
  }
}