Question

我正在尝试翻译这个

.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;
}

将其翻译并随机化为 scss 之类的

@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);
  }
}

我以某种方式无法让 random_range 函数正常运行。我很感激提示。

Answer 1

无法弄清楚，为什么上述内容在 Vue 应用程序中没有按预期工作。让它与

一起工作

@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();
  }
}

scss - 在循环中随机化

1 个答案: