less中用.each()配合@index生成带序号原子类名时，需显式声明数字列表（如1 2 3...12），@index即当前项值而非下标，配合unit()、percentage()安全处理单位与百分比，并始终用@value取非数字项内容，避免硬编码与越界。
Less 中用 .each() 配合 @index 生成带序号的原子类名
Less 本身不支持原生 for 循环，但 4.0+ 版本引入了 .each() 函数，配合列表和 @index 可以安全、清晰地生成 mt-1、mt-2 这类带序号的原子类。关键不是“怎么写循环”，而是“怎么让序号对齐语义且不越界”。
常见错误是直接写 1...12 硬编码范围，结果新增一个 mt-13 就得改两处；或者用 length() 动态算但漏掉索引偏移，导致类名从 mt-0 开始。
- 必须用
@list: 1 2 3 4 5 6 7 8 9 10 11 12;显式声明范围——比range(1, 13)更可控，避免隐式类型转换问题 -
.each(@list, { .mt-@{index} { margin-top: (@index * 0.25rem); } });—— 注意@index是当前项值（非数组下标），所以不用+1 - 如果想跳过某些值（比如只生成偶数间距），改用
@list: 2 4 6 8 10 12;，别在循环体里加if，Less 不支持条件分支嵌套在.each内部
用 unit() 和 percentage() 控制单位与缩放逻辑
生成 ml-2、ml-4 这类水平间距时，序号常需映射为倍数或百分比，不能直接当像素用。Less 的 unit() 和 percentage() 是唯一能安全剥离/重挂单位的方式，否则 2 * 0.5rem 会报错 “Operation on different types”。
-
.each(@list, { .ml-@{index} { margin-left: unit(@index * 0.5, rem); } });——unit(..., rem)强制转为rem单位 - 若需百分比类（如
w-1/2），先定义分数列表：@fractions: 1/2 1/3 2/3 1/4 3/4;，再用.each(@fractions, { .w-@{value} { width: percentage(@value); } }); - 注意：Less 解析
1/2默认是除法运算，必须写成字符串"1/2"并配合~""拼接类名，否则@{value}输出的是计算结果0.5
避免 @index 与 @value 混用导致类名错位
Less .each() 的回调参数默认是 @value，但很多人误以为 @index 是下标（0-based），实际它是当前遍历项的原始值。一旦列表含非数字（如 "xs" "sm" "md"），@index 就不再是数字，@value 才是可靠来源。
- 错误写法：
.each(@breakpoints, { .d-@{index}-up { display: block; } });—— 若@breakpoints: xs sm md;，则生成.d-xs-up、.d-sm-up，但@index此时等于xs，不是序号 - 正确写法：
.each(@breakpoints, { .d-@{value}-up { display: block; } });—— 始终用@value取内容，@index只用于纯数字序列 - 混合场景（如
gap-2、gap-4、gap-auto）必须拆成两个列表，或用 map 结构（Less 4.2+ 支持map-keys()），不要强求单次循环覆盖所有类型
编译后 CSS 体积与调试线索要兼顾
自动生成 100 个类名很容易，但上线后没人用的 pt-99 会拖慢解析速度，也增加 DevTools 里查找的干扰。Less 没有运行时条件，所以控制输出靠“预设列表”和“命名约定”。
- 把常用值抽成变量：
@spacing-steps: 0 0.25 0.5 0.75 1 1.5 2 3 4 6 8 12;，再用.each(@spacing-steps, { .p-@{value} { padding: unit(@value, rem); } }); - 类名中保留可读单位：
text-size-14px比text-14更易定位，用~"text-size-@{value}px"拼接 - 生成前加注释：
// [AUTO] margin utilities (1–12)，避免同事误删生成块；编译后 CSS 里也会保留该行，方便回溯
真正难的不是写出循环，是决定哪些序号该出现、哪些该被语义化替代（比如用 mt-auto 而非 mt-999），以及确保设计师给的间距规范能平滑映射到那几行 Less 列表里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
