CSS循环,方法定义,判断,变量用法

写的demo,实现随机生成1000个div,随机颜色,随机大小(有限制),随机鼠标进入每个div后的鼠标所在区域的颜色.
话不多说,上代码,每句代码有注释

<template>
  <div class="content" >
    <div v-for="count in btnColorList" :class="count"  @mousemove="handleMouseMove($event,count)">
      <span>{{ count }}</span>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      count:1000,
      btnColorList:[],
    }
  },
  mounted() {
    for(let i=1;i<=this.count;i++) {
      this.btnColorList.push('Btn-'+i);
    }
  },
  methods: {
    handleMouseMove(e,color) {
      const btnStyle = document.getElementsByClassName(color)[0].style;
      btnStyle.setProperty(`--${color}x`, `${e.offsetX}px`)
      btnStyle.setProperty(`--${color}y`, `${e.offsetY}px`)
    },
  }
}
</script>

<style  lang="scss"  >
.content{
  display: flex;
  flex-wrap: wrap;
  /**定义颜色数组*/
  $liColor:yellow,green,red;
  /**定义颜色map*/
  $colorsMap: (
    0: (
      "width":500,
      "height":200,
    ),
    1:  (
      "width":500,
      "height":20,
    ),
    2: (
      "width":500,
      "height":5,
    )
  );

  @function random_color() {
    // 生成一个0到255之间的随机数
    $r: random();
    $g: random();
    $b: random();

    // 将随机数转换为整数
    $r: round($r * 255);
    $g: round($g * 255);
    $b: round($b * 255);

    // 输出RGB格式的颜色
    @return rgb($r, $g, $b);
  }

//定义基础样式
  .btn {
    position: relative;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    overflow: hidden;
    span {
      position: relative;
      pointer-events: none;
    }
    &::before {
      position: absolute;
      transform: translate3d(-50%, -50%, 0);
      transition: width 200ms ease, height 200ms ease;
    }
  }

  /**定义方法*/
  /**
   * $width 宽
   * $height 高
   * $color 背景颜色,
   * 鼠标进入后颜色,
   * 第几个div
   */
  @mixin btnDiy($width,$height,$backgroundColor,$colors,$count){
    @debug 'className:' $width,$height,$backgroundColor,$colors,$count;
  $btn:"Btn";
    $className:#{$btn}-#{$count};
    //@debug 'className: ' $className;
    //判断
    @if $height>100 {
      $height: 100;
    }@else if $height<50 {
      $height: 100;
    }@else{
      $height: $height;
    }
    .#{$className}{
      //继承基础样式
      @extend .btn;
      //自定义样式
      width:#{$width+'px'};
      height: #{$height+'px'};
      background-color: $backgroundColor;
      &::before {
        --size: 0;
        //引用变量
        left: var(--#{$className+'x'});
        top: var(--#{$className+'y'});
        width: var(--size);
        height: var(--size);
        background-image: radial-gradient(
            circle closest-side,
            $colors,
            transparent
        );
      }
      //鼠标移入将鼠标所在变大
      &:hover::before {
        --size:#{$height*5+'px'}
      }
    }
  }
  /**定义方法,并传入颜色数组*/
  @mixin forBtnStyle(){
    @for $i from 1 through 1000 {
      //遍历获取数组值
      //$color: nth($liColor, $i);
      //取模
      $model:$i % length($colorsMap);
      //获取定义map的值
      $colorMapValue: map-get($colorsMap,$model);
      //调用方法生成随机鼠标进入颜色
      $colorRandom:random_color();
      $backgroundColorRandom:random_color();
      //打印操作,方便调试确定变量值
      //@debug 'params: 'map-get($colorMapValue,'width'),map-get($colorMapValue,'height'),$backgroundColorRandom,$colorRandom;
      //调用方法
      @include btnDiy(
          map-get($colorMapValue,'width'),
          map-get($colorMapValue,'height'),
          $backgroundColorRandom,
          $colorRandom,
         $i
      )
    }

    /**循环map*/
    // @for $i from 1 through length($colorsMap) {

    // 	/**获取到颜色map的Key*/
    // 	$key: nth(map-keys($colorsMap), $i);
    // 	/**获取颜色map的value*/
    // 	$value: map-get($colorsMap, nth(map-keys($colorsMap), $i))
    // 	/**根据获取到的值*/
    //   }
  }
  @include forBtnStyle();
}
</style>