可行但需严格约束：必须用设计令牌变量池驱动.each()批量生成，禁用嵌套媒体查询与动态函数，响应式类名须字符串拼接，且必须与purgecss构建流程强绑定。
直接用 .each() 生成原子类可行，但不加约束会产出冗余 CSS；关键在于变量池驱动、禁止嵌套媒体查询、响应式类名必须字符串拼接，且必须与 PurgeCSS 构建流程绑定。
为什么不能用 @for 或 loop() 生成原子类
Less 原生不支持 @for，所谓 loop() 是社区递归 mixin 封装，不是语言特性。直接写 loop(12) 会报错 ReferenceError: loop is not defined。原子类数量动辄上百，用递归易触发编译栈溢出（Less 4.x 默认限深约 256 层），且递归中变量不可变，@i: @i + 1 无效，必须靠参数传递计数器——这对原子类这种扁平、高密度的生成场景是过度复杂且易错的。
-
.each()是 Less 3.5+ 内置函数，专为映射结构设计，安全、可控、无栈风险 - 原子类依赖的是「值到类名」的确定性映射（如
sm→0.25rem），不是「从 1 到 12」的数值序列 - 手写递归 mixin 还得自己处理守卫条件、插值语法、优先级顺序，维护成本远超收益
.each() 必须配合设计令牌变量池
原子类不是为了“多”，而是为了“可收敛”。所有间距、颜色、圆角值必须来自顶层变量映射，例如：
@spacing-map: {
'0': 0;
'xs': 0.125rem;
'sm': 0.25rem;
'md': 0.5rem;
'lg': 1rem;
};
.each(@spacing-map, .(@value, @key) {
.m-@{key} { margin: @value; }
.p-@{key} { padding: @value; }
.mt-@{key} { margin-top: @value; }
});
-
@key是字符串，.m-0不会变成.m--0（Less 自动处理连字符） - 负边距需单独定义，如
.m-nxs，别把-xs当作@key，否则解析失败 - 禁止在循环体里写
&:hover或@media，否则 PurgeCSS 无法识别哪些类被实际使用
响应式类名必须用字符串拼接，不能用 @media
写 @media (min-width: 768px) { .md:p-4 { padding: 1rem; } } 看似直观，但会导致两问题：一是编译后生成真实媒体查询块，体积翻倍；二是 JS 无法通过 classList 动态切换断点状态。正确做法是用断点前缀拼接类名：
@breakpoints: (sm: 640px, md: 768px, lg: 1024px);
.each(@breakpoints, .(@bp-val, @bp-key) {
.each(@spacing-map, .(@v, @k) {
@{bp-key}:p-@{k} { padding: @v; }
@{bp-key}:mt-@{k} { margin-top: @v; }
});
});
- 生成的是纯类名，如
md:p-4，不依赖媒体查询，PurgeCSS 可安全识别并剔除未使用的类 - 响应式块必须放在默认类之后，否则会被覆盖；建议统一置于文件末尾
- 断点前缀顺序即 CSS 优先级顺序，
lg:p-4要比md:p-4靠后，才能保证大屏生效
所有原子类必须集中单入口，禁用动态函数
原子类不是组件，不需要逻辑分支或运行时计算。任何 if、when 守卫、lighten()、percentage() 等动态函数都会让 PurgeCSS 失去静态分析能力，导致无法剔除未使用类。所有样式必须是「变量 → 字符串插值 → 规则」的线性展开。
- 禁用
@import拆分原子类文件——拆散后类来源难定位，调试困难，且破坏 PurgeCSS 的单入口扫描前提 - 颜色/透明度必须解耦：
.text-blue-500和.bg-blue-500不能共用一个@blue-500变量推导，要各自定义，避免误删 - 最终输出的 CSS 体积是否轻量，不取决于 Less 怎么写，而取决于构建时 PurgeCSS 是否能准确识别 HTML 中真实出现的类名
真正容易被忽略的点是：PurgeCSS 的 content 配置必须包含所有可能的类名组合路径，比如 md:p-4 这种带冒号的类名，若正则没覆盖，就会全量保留——这不是 Less 的问题，而是构建链路里最脆弱的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
