基于less和scss 循环生成css

k0933

已于 2024-09-14 17:08:04 修改

阅读量162

点赞数 1

分类专栏：记录文章标签： css 前端

于 2024-09-14 17:04:32 首次发布

本文链接：https://blog.csdn.net/k0933/article/details/142262552

版权

记录专栏收录该内容

34 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述
一、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%;
  }