Less 的 each() 函数不支持原生遍历 CSS 键值对，因其仅能遍历列表或伪映射，无法解析 color: #000 等语法为键值对；需用成对 list 配合 extract() 和 range() 手动实现。
Less 的 each() 函数不支持原生遍历 CSS 键值对
Less 本身没有类似 JavaScript 的 Object.entries() 或内置的键值对迭代能力。each() 只能遍历预定义的列表（list）或映射（map），且 map 在 Less 中是“伪结构”——它本质是用空格或逗号分隔的值对序列，没有真正的 key lookup 机制。试图用 each(@map, ...) 直接解构属性名和值会失败，因为 Less 不解析 CSS 属性语法（如 color: #000）为键值对。
用 make-map() + extract() 模拟键值对遍历
可行方案是手动构造一个“键值对列表”，把属性名和值成对压入 list，再用 each() 配合 extract() 拆解。Less 的 extract() 支持按索引取值，适合处理两两成组的数据。
常见错误现象：each((color #000, padding 1rem), @pair) { ... } 看似合理，但 @pair 在每次迭代中只是单个值（如 color 或 #000），无法自动配对。
- 正确写法：先定义成对 list：
@props: color #000, padding 1rem, margin 0; - 用
length(@props)判断总项数，循环步长为 2 - 在循环体中用
extract(@props, @i)和extract(@props, @i + 1)分别取 key 和 value - 注意索引从 1 开始，
@i应为1, 3, 5...，可用range(1, length(@props), 2)生成
@import
- 性能上无明显差异：Less 编译是毫秒级，遍历几十对属性几乎无感
- 真正瓶颈在于维护成本——把 CSS 属性硬编码进 list，违背“样式即数据”初衷
- 若需高频复用，建议退一步：用 CSS 自定义属性 + JS 动态赋值，而非强求 Less 编译期遍历
容易被忽略的空格与类型陷阱
extract() 对空格极度敏感。比如 @props: color #000, padding 1rem; 中，color #000 是两个独立值，但若写成 color#000（无空格），extract() 就只拿到一个 token，后续取值越界。
- 值含空格时（如
font-family: "Helvetica Neue"），必须用引号包裹整个值对："font-family" "Helvetica Neue" - 单位不能省略：写
margin 1会被当作文本，不是1px；Less 不自动补单位 - 颜色关键字（如
red）和十六进制（#f00）行为一致，但函数调用（如rgba(0,0,0,0.5)）必须完整括号，否则解析失败
真正在意效率的话，与其折腾 each() 遍历，不如直接写展开式规则——Less 的优势从来不在运行时抽象，而在变量、嵌套和 mixin 的静态组合能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
