less不支持原生@each/for循环，批量生成utility类需用递归mixin+哨兵变量控制终止，否则易报“maximum call stack size exceeded”；映射表须用空格分隔列表（如@spacing-map: sm 4px, md 8px），禁用对象字面量；响应式前缀靠mixin参数拼接选择器并包裹@media；css体积大因静态编译无法按需提取，需人工约束范围与变体。
为什么直接用 Less 写 Utility 类库会卡在变量循环上
Less 本身不支持原生的 @each 或 for 循环（不像 Sass），想批量生成 mt-1、mt-2 这类间距工具类，得靠递归 mixin + 哨兵变量控制终止条件。否则要么写死 20 行重复代码，要么编译报错“maximum call stack size exceeded”。
关键点在于：递归必须有明确退出条件，且每次调用要修改哨兵值；同时避免在顶层直接展开——所有 utility 都得包裹在 mixin 内，由用户显式调用。
- 错误做法：
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; }—— 手动维护不可扩展 - 正确路径：用
.make-spacing()mixin 封装生成逻辑，传入单位映射表和前缀 - 注意 Less 的作用域：递归中修改的变量不会自动继承到下一层，要用
@arguments或参数透传
如何定义可配置的 spacing / color / radius 映射表
Utility 库的核心是“映射表”——它把语义名（如 sm）和实际值（如 4px）关联起来。Less 里最适合用嵌套对象模拟，但要注意语法限制：不能用 : 直接写键值对，得用空格分隔的列表或 ~"" 包裹字符串。
推荐结构：@spacing-map: sm 4px, md 8px, lg 16px;，然后用 extract() 和 length() 配合递归遍历。颜色表同理：@color-map: primary #3b82f6, secondary #6b7280;。
- 映射表必须定义在全局或 mixin 外层，否则递归时无法访问
- 不要用
@map: (sm: 4px)—— Less 不支持对象字面量，会编译失败 - 若需响应式断点，把断点名（如
md）作为映射表 key 的一部分，再用@media嵌套生成
怎样让 flex、grid 等布局工具类支持响应式前缀
像 md:flex-row 这种写法，本质是把断点名（md）作为 class 名前缀，并在对应媒体查询内展开样式。Less 里没法动态拼接 class 名，只能靠 mixin 参数 + 字符串拼接 + ~"..." 实现。
例如定义 .responsive-flex(@breakpoint, @value)，内部用 @selector: ~"@{breakpoint}-flex"; 生成选择器，再用 @media (min-width: @{breakpoint-value}) 包裹规则块。
- 断点值必须单独存为变量（如
@breakpoint-md: 768px;），不能混在映射表里，否则@media无法读取 - 每个响应式工具类都要手动调用一次 mixin，比如
.responsive-flex(md, row);—— 没有自动批量生成的捷径 - 注意 CSS 优先级：响应式类的 specificity 和普通类一致，不会因为带前缀就更高
为什么最终生成的 CSS 文件体积比 Tailwind 大得多
Less 编译是静态的，你定义了 .text-sm、.text-md、.text-lg，不管 HTML 里有没有用，全部打进 CSS。Tailwind 用 PostCSS 扫描源码后按需提取，而 Less 没这能力。
折中方案只有两个：一是严格约束 utility 范围（比如只做 spacing/color/typography，砍掉 hover/focus 变体）；二是配合 postcss-discard-comments 和 cssnano 压缩，但无法解决未使用类的冗余问题。
- 别试图在 Less 里模拟 PurgeCSS —— 没有 AST 解析能力，所有“条件编译”都是假的
- 如果项目已用 Webpack，可考虑用
less-plugin-npm-import动态加载子模块，但依然无法跳过未引用的 class - 真正轻量的关键不在语法，而在克制：一个
bg-gray-100比十个bg-gray-50到bg-gray-900更轻
Less 写 utility 库不是不能做，而是得接受它天生不支持“按需生成”这个事实。能控住范围、忍住不写变体、手动删掉不用的模块，才可能真轻量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
