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