使用Sass编写动态星空效果（css工程化的宏观认识）

// 定义一个宏，用于生成星星元素
@mixin star-generator($count: 1) {
  $star-size: 100px;
  $star-color: white;
  $star-position-range: 1000px;
 
  @for $i from 1 through $count {
    $random-size: random_range($star-size) ;
    $random-position-x: random_range($star-position-range) ;
    $random-position-y: random_range($star-position-range) ;
    $random-rotation: random_range(360deg);
    $random-scale: random_range(0.5, 1);
 
    .star-#{$i} {
      width: $random-size;
      height: $random-size;
      position: absolute;
      top: $random-position-x;
      left: $random-position-y;
      transform: rotate($random-rotation) scale($random-scale);
      background: $star-color;
      border-radius: 50%;
    }
  }
}
 
// 定义一个函数，用于生成指定范围内的随机数
@function random_range($max) {
  @return random(ceil($max));
}
 
// 使用宏生成10个星星元素
@include star-generator(10);

这段代码定义了一个Sass宏star-generator，它接受一个参数$count，表示要生成的星星数量。在宏的内部，使用了循环和随机函数来为每个星星生成随机的尺寸、位置、旋转角度和缩放比例。然后，它会根据这些随机属性生成相应的星星元素的CSS规则。最后，调用宏生成10个星星元素。这个例子展示了如何使用Sass的循环、随机函数和宏来创建复杂的动态样式。