基于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%;}