利用 Less 循环高效生成多组 CSS 间距工具类

🌟 引言

在日常前端开发中，我们经常需要为元素设置固定的 padding 或 margin

值。若直接手动编写大量重复代码不仅繁琐且难以维护。本文将解析一段基于 Less

的智能循环代码，展示如何通过少量配置自动生成一套灵活可复用的间距工具类库。

📦 核心功能概述

此段 Less 代码实现了以下目标：

根据预设的数字列表 (@lists)，批量生成带前缀的 CSS 类；
支持四种方向单独控制（上下左右）；
同时提供单边、双边及四边统一的快捷写法；
所有单位均为 px，避免手动换算误差。

🔍 逐行详解代码逻辑

✅ 第一步：定义基础数据源

javascript 复制代码

@lists: 0, 5, 8, 10, 15, 16, 20, 30;

这是核心数据集，包含常用的间距数值；
可根据需求增删修改数值顺序；
后续所有类均基于此列表动态生成。

⚙️ 第二步：递归循环处理每个数值

javascript 复制代码

.loop(@index) when (@index <= length(@lists)) {
  // 获取当前索引对应的数值
  @num: extract(@lists, @index);
  // 生成各类选择器
  .pt@{num} {
    padding-top: @num * 1px !important;
  }
  .pr@{num} {
    padding-right: @num * 1px !important;
  }
  .pb@{num} {
    padding-bottom: @num * 1px !important;
  }
  .pl@{num} {
    padding-left: @num * 1px !important;
  }
  .p@{num} {
    padding: @num * 1px !important;
  }
  .mt@{num} {
    margin-top: @num * 1px !important;
  }
  .mr@{num} {
    margin-right: @num * 1px !important;
  }
  .mb@{num} {
    margin-bottom: @num * 1px !important;
  }
  .ml@{num} {
    margin-left: @num * 1px !important;
  }
  .m@{num} {
    margin: @num * 1px !important;
  }
  // 递归调用下一个索引
  .loop(@index + 1);
}
// 从第一个元素开始执行
.loop(1);

递归机制：通过 .loop() 混合宏实现逐项遍历列表；
extract() 函数取出当前索引位置的数值并存入 @num；
终止条件为@index > length(@lists)，防止越界；
初始调用 .loop(1) 启动循环。

🎨 第三步：动态生成 CSS 类规则

以 @num = 5 为例，会生成以下两类规则：

类型	类名格式	作用域	示例效果
Padding	.pt5, .pr5	单个方向	padding-top:5px
	.pb5, .pl5		...
	.p5	四边统一	padding:5px
Margin	.mt5, .mr5	单个方向	margin-top:5px
	.mb5, .ml5		...
	.m5	四边统一	margin:5px

⚠️ 关键细节：

所有数值均乘以 1px，无需额外单位转换；
!important 确保高优先级覆盖其他样式；
类名遵循 BEM 命名规范，语义清晰易读。

🛠️ 实际应用场景举例

假设你需要调整卡片组件的外层容器间距：

javascript 复制代码

<div class="card m15"><!-- 上下左右均有15px外边距 --></div>
<div class="card pt10 pb10"><!-- 仅顶部和底部内边距10px --></div>

相较于传统写法：

javascript 复制代码

.card { margin: 15px !important; }
.card .header { padding-top: 10px !important; }
.card .footer { padding-bottom: 10px !important; }

新方案优势显著：

✅ 更少代码量：只需添加两个短小类名；

✅ 更强可维护性：修改 @lists 即可全局更新所有相关样式；

✅ 一致性保障：杜绝因手误导致的数值不一致问题。

💡 进阶优化建议

扩展单位支持：如需支持 rem 或 em，可将 *1px 改为变量计算；
javascript 复制代码
```
@unit: 1px; // 可替换为 rem/em
padding-top: @num * @unit;
```
增加响应式变体：结合媒体查询生成移动端专用间距类；
整合至UI框架：作为基础样式模块嵌入到Vue/React组件系统中。

❗ 注意事项

慎用 !important：虽然能强制生效，但可能破坏层叠上下文关系，建议仅在必要场景使用；
避免过度嵌套：复杂选择器会影响浏览器渲染性能；
命名冲突风险：确保生成的类名不会与现有样式产生重叠。

📌 总结

这段 Less 代码完美诠释了"DRY"（Don't Repeat Yourself）原则，通过简单的配置和循环逻辑，极大提升了开发效率和样式管理的规范性。无论是构建设计系统还是日常项目开发，这种模式都值得借鉴和应用。

附录：完整生成结果预览

输入列表 [0,5,8,10,15,16,20,30] 将产出如下类名及对应样式：

类名	样式声明
.pt0	padding-top: 0px !important;
.m15	margin: 15px !important;
.pl10	padding-left: 10px !important;
.mt20	margin-top: 20px !important;
...	...

完整代码

文字是对每行进行了分析解释，附上完整代码方便直接拷贝。

javascript 复制代码

@lists: 0, 5, 8, 10, 15, 16, 20, 30;

.loop(@index) when (@index <= length(@lists)) {
  @num: extract(@lists, @index);
  @unit: 1px; // 可替换为 rem/em
  .pt@{num} {
    padding-top: @num * @unit !important;
  }
  .pr@{num} {
    padding-right: @num * @unit !important;
  }
  .pb@{num} {
    padding-bottom: @num * @unit !important;
  }
  .pl@{num} {
    padding-left: @num * @unit !important;
  }
  .p@{num} {
    padding: @num * @unit !important;
  }
  .mt@{num} {
    margin-top: @num * @unit !important;
  }
  .mr@{num} {
    margin-right: @num * @unit !important;
  }
  .mb@{num} {
    margin-bottom: @num * @unit !important;
  }
  .ml@{num} {
    margin-left: @num * @unit !important;
  }
  .m@{num} {
    margin: @num * @unit !important;
  }
  .loop(@index + 1);
}
.loop(1);

立即尝试将其集成到你的项目吧！🚀