如何利用混入和递归实现循环

约 976 字大约 3 分钟

2025-04-13

LESS（Leaner Style Sheets）是一种 CSS 预处理器，虽然它没有传统的 for 或 while 循环语法，但可以通过 递归混入（Recursive Mixins） 和 条件语句 实现循环逻辑。以下是对 LESS 循环的详细介绍，涵盖语法、用法和实际示例：

一、LESS 循环的核心原理

LESS 的循环通过 递归调用混入（Mixin） 实现，结合 条件判断 控制循环终止。

核心步骤主要是以下几点：

定义混入：创建一个带有参数的混入（Mixin）。
设置终止条件：在混入内部添加条件判断（如 when），当满足条件时停止递归。
递归调用自身：在条件不满足时，修改参数并再次调用混入自身。

二、基本语法示例

示例 1：生成数字序列类名

// 定义递归混入
.loop(@counter) when (@counter > 0) {
  // 生成样式规则
  .col-@{counter} {
    width: (@counter * 10%);
  }
  // 递归调用，减少计数器
  .loop(@counter - 1);
}

// 触发循环（生成 .col-5 到 .col-1）
.loop(5);

编译后的 CSS：

.col-5 {
  width: 50%;
}
.col-4 {
  width: 40%;
}
.col-3 {
  width: 30%;
}
.col-2 {
  width: 20%;
}
.col-1 {
  width: 10%;
}

示例 2：遍历颜色列表

// 定义颜色列表
@colors: red, green, blue, orange;

// 递归混入
.color-loop(@index) when (@index > 0) {
  // 获取当前颜色
  @color: extract(@colors, @index);

  // 生成样式
  .text-@{color} {
    color: @color;
  }

  // 递归调用，递减索引
  .color-loop(@index - 1);
}

// 触发循环（从列表长度开始）
.color-loop(length(@colors));

编译后的 CSS：

.text-orange {
  color: orange;
}
.text-blue {
  color: blue;
}
.text-green {
  color: green;
}
.text-red {
  color: red;
}

三、进阶循环技巧

1. 正向循环（从 1 到 N）

通过递增计数器实现正向遍历：

.loop-forward(@counter) when (@counter <= 5) {
  .item-@{counter} {
    margin: (@counter * 5px);
  }
  .loop-forward(@counter + 1); // 递增计数器
}
.loop-forward(1); // 从 1 开始

编译结果：

.item-1 {
  margin: 5px;
}
.item-2 {
  margin: 10px;
}
.item-3 {
  margin: 15px;
}
.item-4 {
  margin: 20px;
}
.item-5 {
  margin: 25px;
}

2. 循环生成栅格系统

生成类似 Bootstrap 的栅格类（如 .col-md-1 到 .col-md-12）：

.generate-grid(@prefix, @columns, @index: 1) when (@index <= @columns) {
  .col-@{prefix}-@{index} {
    width: (@index * 100% / @columns);
  }
  .generate-grid(@prefix, @columns, @index + 1); // 递归调用
}

// 生成 12 列栅格，前缀为 md
.generate-grid(md, 12);

编译后的 CSS：

.col-md-1 {
  width: 8.33333333%;
}
.col-md-2 {
  width: 16.66666667%;
}
... .col-md-12 {
  width: 100%;
}

3. 循环嵌套

在循环内部嵌套另一个循环，生成复杂结构：

// 外层循环：遍历主题
.theme-loop(@theme-index) when (@theme-index > 0) {
  @theme-name: extract(dark, light, @theme-index);

  // 内层循环：遍历组件
  .component-loop(@comp-index) when (@comp-index > 0) {
    @comp-name: extract(button, card, @comp-index);

    .@{theme-name}-@{comp-name} {
      background: if(@theme-name = dark, #333, #fff);
    }
    .component-loop(@comp-index - 1);
  }
  .component-loop(2); // 触发内层循环

  .theme-loop(@theme-index - 1);
}
.theme-loop(2); // 触发外层循环

编译后的 CSS：

.light-card {
  background: #fff;
}
.light-button {
  background: #fff;
}
.dark-card {
  background: #333;
}
.dark-button {
  background: #333;
}

四、循环的常见应用场景

动态生成类名
如栅格系统、间距工具类（.mt-5, .mb-10）。
遍历列表数据
处理颜色、字体、断点等预定义列表。
生成动画关键帧
自动创建 @keyframes 的百分比步骤。
响应式设计
为不同屏幕尺寸生成媒体查询样式。

五、注意事项

终止条件必须明确
避免无限递归导致编译错误。
变量作用域
循环内部的变量仅在当前递归层级有效。
性能优化
避免过深的循环嵌套，减少编译时间。

六、对比 Sass 循环

LESS：依赖递归混入，写法稍复杂，但灵活性高。
Sass：提供 @for、@each、@while 等直接循环语法，更直观。

通过递归混入和条件语句，LESS 可以实现强大的循环逻辑，帮助开发者减少重复代码，提升样式表的可维护性！

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24