直接用 calc() 和嵌套生成工具类会出错，因为原子类需扁平、不可变、无上下文，而 calc() 和嵌套会在编译时固化值，丧失运行时灵活性并引发作用域污染。
为什么直接用 calc() 和嵌套生成工具类会出错
Less 里写原子化工具类，最常踩的坑是把 CSS 原子类当成“样式函数”来用——比如想用 .p-4 表示 padding: 1rem，但又试图在类里塞 calc(1rem + 2px) 或嵌套 &:hover。问题在于：原子类本该是扁平、不可变、无上下文的；而 Less 的嵌套和计算会在编译时固化值，失去运行时灵活性，还容易因作用域污染产生意外覆盖。
真正可行的做法是：用 Less 变量定义设计令牌（design tokens），再用循环生成纯静态类名，不掺杂逻辑判断或条件分支。
- 所有间距、颜色、字体大小必须来自统一变量池，如
@space-xs: 0.25rem、@color-primary: #007bff - 避免在
.m-2类里写margin: calc(@space-base * 2)—— 编译后是固定值，无法被 PurgeCSS 安全删除 - 如果需要响应式变体（如
.md:p-4），必须用媒体查询包裹整个类声明，不能靠 mixin 动态注入
用 .each() 循环生成 margin / padding 工具类的正确写法
Less 3.5+ 支持 .each()，这是生成原子类最干净的方式。关键不是“怎么循环”，而是循环体里只做一件事：把键值对映射为一个类声明，不加额外修饰。
.each({
'0': 0,
'1': 0.25rem,
'2': 0.5rem,
'4': 1rem,
'8': 2rem
}, {
.m-@{key} { margin: @value; }
.p-@{key} { padding: @value; }
.mt-@{key} { margin-top: @value; }
.mb-@{key} { margin-bottom: @value; }
});
注意三点：
-
@key是字符串，所以.m-0不会变成.m--0（Less 会自动处理连字符） - 不要在循环里写
:hover或@media—— 那属于组件层逻辑，不该混进原子类 - 若需负边距，单独建
.m-n1等类，别用-当 key，否则 Less 解析失败
如何让 text- 和 bg- 类支持主题色变量切换
原子类要适配深色模式或品牌主题，不能靠 JS 切换 class，得靠 CSS 自定义属性 + Less 变量双驱动。核心是：Less 编译时生成带 var(--color-primary) 的规则，而非硬编码值。
先定义主题变量映射：
@theme-colors: {
primary: #007bff;
success: #28a745;
warning: #ffc107;
};
再用循环生成类（注意：值用 ~"var(--color-@{key})" 包裹，避免被 Less 提前求值）：
.each(@theme-colors, {
.text-@{key} { color: ~"var(--color-@{key})"; }
.bg-@{key} { background-color: ~"var(--color-@{key})"; }
});
这样生成的 CSS 是可被 CSS 变量接管的，前端只需动态改 :root 下的 --color-primary 就能批量生效。
- 千万别写
color: @value—— 那会编译成死值，主题切换失效 - 如果项目不用 CSS 变量，就老老实实用
@value，但必须接受构建时锁定主题 -
~""是 Less 的转义语法，漏掉会导致编译报错Unexpected token
为什么 !important 在原子类中几乎总是错的
加 !important 看似能“强制覆盖”，实则破坏原子化前提：单一职责与低特异性。Less 里一旦给 .flex 加了 display: flex !important，后续任何基于 Flexbox 的组件样式都会被卡死。
真正需要“强制”的场景极少，常见误用有：
- 为了覆盖第三方库样式而全局加
!important—— 应该用更精确的选择器或调整加载顺序 - 响应式工具类（如
.sm:hidden）加!important—— 正确做法是确保媒体查询内联，且顺序在基础类之后 - 认为 “原子类必须赢过一切” —— 实际上原子类的权重应永远低于组件类，否则无法组合
唯一合理使用 !important 的地方是重置类（如 .reset-margin），且必须文档注明：“仅用于初始化污染环境”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
