less 中 each() 不是运行时函数而是编译期循环指令，必须配合 map 使用，如 @spacers: (0: 0, 1: 0.25rem); .each(@spacers, { @key: @value[0]; @val: @value[1]; .m-@{key} { margin: @val; } });
Less 中 each() 函数不支持直接生成 CSS 类？先说结论
Less 本身没有运行时 each() 函数；你看到的 each() 是 Less 4.0+ 引入的「循环指令」（属于 mixin 指令，不是 JS 那种函数），它只能在编译期展开，且**必须配合 .loop() 或自定义 mixin 使用**。直接写 each(@list, ...) { ... } 会报错：Unknown function each。
用 .each() 指令 + map 生成间距工具类（如 m-2, mt-4）
Less 提供了 .each() 指令，但它只接受一个「map」（键值对列表）作为参数，不能直接遍历数组。所以你需要把间距配置转成 map：
@spacers: (
0: 0,
1: 0.25rem,
2: 0.5rem,
3: 1rem,
4: 1.5rem,
5: 3rem
);
.each(@spacers, {
@key: @value[0];
@val: @value[1];
.m-@{key} { margin: @val; }
.mt-@{key} { margin-top: @val; }
.mr-@{key} { margin-right: @val; }
.mb-@{key} { margin-bottom: @val; }
.ml-@{key} { margin-left: @val; }
.mx-@{key} { margin-left: @val; margin-right: @val; }
.my-@{key} { margin-top: @val; margin-bottom: @val; }
});
注意点：
-
@spacers必须是 map 形式，括号包裹、冒号分隔键值，逗号分隔项 -
@value[0]取 key，@value[1]取 value —— 这是 Less map 的固定访问语法 - 每个生成的类名必须用字符串插值
@{key}，不能写成.m-@key（Less 不支持变量直接拼接类名） - 该写法仅适用于 Less 4.0+；3.x 版本需改用递归 mixin
为什么不用 for 或数组遍历？兼容性与语义限制
Less 没有 for 关键字，也没有 length() + extract() 组合的“数组遍历”原生方案。试图用数组模拟会踩这些坑：
- 数组是纯值列表，无法同时携带「语义名」和「数值」，比如你想生成
pt-2但数组里只有0.5rem，没法反推前缀或缩写 -
extract(@list, @i)需手动控制索引，容易越界，且无法在循环体中动态生成不同前缀类（如mt/mb） - Less 编译器对嵌套层级敏感，递归 mixin 超过 16 层可能触发
Recursive call error - map +
.each()是官方推荐路径，语义清晰、错误提示明确、生成结果可预测
生成响应式间距类时，@media 不能直接套在 .each() 里面
这是最容易忽略的陷阱：Less 的 .each() 是编译期展开，但 @media 查询块如果写在 .each() 内部，会导致每个类都重复包裹一遍媒体查询，体积爆炸且逻辑混乱：
// ❌ 错误：每个类都生成一次 @media 块
.each(@spacers, {
@key: @value[0];
@val: @value[1];
@media (min-width: 768px) {
.m-sm-@{key} { margin: @val; }
}
});
正确做法是先生成基础类，再用独立 mixin 封装响应式变体：
.make-spacing-classes(@spacers) {
.each(@spacers, {
@key: @value[0];
@val: @value[1];
.m-@{key} { margin: @val; }
.mt-@{key} { margin-top: @val; }
// ... 其他
});
}
// 然后单独处理断点
@media (min-width: 768px) {
.make-spacing-classes(@spacers);
}
否则你会得到几百行重复的 @media，而且无法按需引入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
