Less中无法直接用.each()生成响应式Flex宽度，需借助less-plugin-lists插件或递归mixin；注意变量命名、单位处理、calc字符串拼接及gap兼容性问题。
Less里用.each()循环生成响应式Flex列表项宽度
Less本身不支持运行时循环，.each()是插件（如less-plugin-lists）提供的扩展能力，原生Less只能靠递归mixin模拟。直接写.each(@list, @item) { ... }会报错Unknown function each——这是最常见的卡点。
实操建议：
- 确认已安装并启用
less-plugin-lists：命令行编译需加--plugin=less-plugin-lists，Webpack中要在less-loader的plugins配置里显式引入 - 避免在
@media块内调用.each()：部分插件版本不支持嵌套作用域，应先生成所有断点下的类，再包裹媒体查询 - 循环变量名必须用
@item或自定义单字母（如@i），不能写@width——插件解析器只识别预设占位符
用递归mixin手动实现响应式Flex等宽/不等宽列表
更稳妥的方式是绕过插件，用Less原生递归mixin控制flex-basis。比如要让列表在sm下每行3项、md下4项、lg下6项，本质是算100% / N，但要注意小数精度和box-sizing干扰。
实操建议：
- 定义断点变量时统一用
@sm: 576px这类数值，别混用em或rem，否则@media (min-width: @sm)可能失效 - 计算宽度优先用
percentage(1/n)而非100% / n，前者返回带%单位的值，后者在某些Less版本里会丢单位导致CSS无效 - 给列表容器加
display: flex; flex-wrap: wrap，子项必须设flex: 0 0 [width]，只写flex-basis不够——IE11会忽略
为什么calc(100% / 3)不能直接用在Less变量里
Less编译期就求值，calc()是浏览器运行时计算的函数，两者不在同一阶段。把@width: calc(100% / 3)塞进flex-basis，Less会尝试做除法并报错Operation on an invalid type。
实操建议：
- 需要动态
calc时，用字符串拼接：@width: ~"calc(100% / @{n})"，其中@n是数字变量 - 拼接后必须用
@{width}插值语法输出，写flex-basis: @width会原样输出变量名而非字符串 - 注意空格：
~"calc(100% / @{n})"里/前后必须有空格，否则Less误判为除法运算符
移动端列表项间距（gap）与Flex兼容性陷阱
gap在Flex布局中IE全系不支持，Android 4.4 WebView也失效。如果用flex-gap配合margin回退，Less里容易因循环逻辑错位导致最后一行多出多余间隙。
实操建议：
- 不用
gap，改用padding+margin负边距组合：容器设padding: 0 8px，子项设margin: 0 -4px - 若坚持用
gap，必须为每个断点单独写@supports (gap: 0)包裹，且内部不能再嵌套.each()——当前插件不支持条件编译内循环 - 测试真机时重点看iOS Safari 14.5以下版本，它识别
gap但计算错误，表现为间隙翻倍
循环生成宽度听着省事，但实际要盯住插件兼容性、单位处理、以及那些没报错却悄悄失效的CSS声明——比如flex-basis: 33.333%在某些安卓机型上会因浮点舍入变成33%，导致换行错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
