基于less和scss 循环生成css

效果

一、less代码

复制代码

  @item-count: 12; // 生成多少个 .item 类

  .item-loop(@n) when (@n > 0) {
    .icon@{n} {
      background: url('../../assets/images/menu/icon@{n}.png') no-repeat;
      background-size: 100% 100%;
    }

    .item-loop(@n - 1);
  }

  .item-loop(@item-count);

二、scss代码

 @for $i from 1 through 12 {
  .icon#{$i} {
    background: url('../../assets/images/menu/icon#{$i}.png') no-repeat;
    background-size: 100% 100%;
  }