<p>最稳妥的间距管理方式是用变量加乘法运算生成，如@spacing-md: @spacing-unit * 4；禁用硬编码、媒体查询重定义变量及临时计算，统一语义命名与混合宏封装，确保可维护性与一致性。</p>
直接用变量加乘法运算生成间距，是最稳妥、最易维护的方式；硬写数字或在媒体查询里重定义变量，90% 的项目后期都会翻车。
为什么不能直接写 margin: 16px？
这不是“写得快”，是埋雷。设计规范调整时，你得全局搜索 16px、24px、8px，漏一个就导致卡片错位、表单对不齐。更麻烦的是，不同组件可能各自定义“中等间距”：按钮用 16px，卡片用 18px，结果视觉节奏全乱。
Less 的价值不在语法炫技，而在把“间距”变成可推演的规则。比如统一从 @spacing-unit: 4 出发，所有值都是它的整数倍：@spacing-sm: @spacing-unit * 2、@spacing-md: @spacing-unit * 4。
- 单位不写死在变量里（
@spacing-unit: 4而非@spacing-unit: 4px），后续可灵活转为rem或适配高倍屏 - 禁止用
@spacing-md + @spacing-sm这类临时计算——语义模糊，半年后没人记得这加出来是啥档位 - 命名用语义而非尺寸：
@space-xs比@spacing-2更能传达设计意图
如何用 .mt()、.mb() 这类混合宏避免重复书写？
手写 margin-top: @spacing-md; margin-bottom: @spacing-md; 容易看串行、漏改、方向写反。封装成混合宏，调用一次就搞定一对逻辑相关的属性。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
.mt(@v) { margin-top: @v; }
.mb(@v) { margin-bottom: @v; }
.mtmb(@v) { .mt(@v); .mb(@v); }调用时写 .mtmb(@spacing-lg)，语义清晰，改起来只动一处。
- 别在宏里默认补单位，比如
.mt(@v)接收@spacing-lg，而不是16px—— 否则换单位体系时要重写全部宏 - 慎用四值缩写
margin: @a @b @c @d，顺序容易记混；显式写.mt()、.mr()更安全 - 如果项目需 RTL 支持，优先用
margin-inline-start替代margin-left，但 Less 不自动推导逻辑属性，得靠额外变量或构建时插件
响应式间距怎么切？别在 @media 里重定义变量
@media (min-width: 768px) { @spacing-md: 24px; } 这种写法完全无效——Less 编译器会忽略它，不报错也不生效。这是新手最常踩的坑。
正确做法是提前定义多套变量集，再用媒体查询 mixin 注入：
@spacing-mobile: 4;
@spacing-tablet: 8;
@spacing-desktop: 12;
<p>.responsive-spacing() {
margin: @spacing-mobile;
@media (min-width: 768px) {
margin: @spacing-tablet;
}
@media (min-width: 1200px) {
margin: @spacing-desktop;
}
}- 不要试图让同一个变量在不同断点“变值”，Less 变量是编译期常量，不是运行时状态
- 如果档位太多，可封装
.spacing-sm()、.spacing-md()等带断点参数的宏，内部做条件判断 - 注意：CSS 原生
calc()里混用 Less 变量（如calc(@spacing-md + 1em)）极易因单位不一致报错，应先确保所有参与运算的值单位统一
循环生成工具类（如 .mt-8、.p-16）要注意什么？
Less 本身没有 @for，所谓“循环”全是递归 mixin 实现的。直接抄网上的 .loop() 代码，大概率编译失败或生成错乱类名。
关键约束有三条：
- 必须写守卫条件（
when (@i <= length(@list))），漏掉就会无限递归，卡死编译器 - 类名拼接必须用插值语法
@{i}，写成@i就只是变量名，不会被替换成数值 - 递归深度默认受限（Less 4.x 约 256 层），生成 100+ 个类时要小心爆栈；超量建议拆成多个小数组分别 loop
更务实的做法：先定义好核心档位（@space-xs～@space-xxl），再手动写几组高频工具类，比强求全自动更可控。
复杂点在于，间距不只是数值问题——它牵扯到 margin 折叠、RTL、响应式、单位一致性、设计系统语义。变量和运算只是起点，真正难的是让整个团队在这些约束下保持同步。
