Less中应使用带单位变量（如@spacing-base: 8;）配合运算控制margin，分层命名（xs/sm/md）、封装混合宏（如.mtmb）、避免硬编码与单位混用，并注意媒体查询内变量作用域限制。
Less里用变量加运算控制margin值，比硬写数字靠谱
直接用@spacing-base这类变量配合加减乘除，能避免改一处漏十处。比如把基础间距设成8px，按钮外边距写margin: @spacing-base * 2;，后面全局调大间距时，只改一个变量就行。
常见错误是写死margin: 16px;，等UI要求所有间距+2px，就得满项目搜16px24px8px挨个改，漏掉一个就错位。
- 推荐用
@spacing-xs、@spacing-sm、@spacing-md分层，而不是全靠* 2、* 3硬算 - 注意单位一致性：
@spacing-base: 8;（不带单位）再在运算时补px，比@spacing-base: 8px;更灵活，否则8px * 2没问题，但8px + 4em会报错 - Less 3.5+ 支持
calc()内联计算，但别滥用——它生成的是CSS原生calc()，浏览器运行时计算，和Less编译期运算不是一回事
用函数封装常用margin组合，减少重复写法
像margin-top和margin-bottom经常成对出现，手写margin: @spacing-md 0 @spacing-md 0;容易看花眼。不如封装个.mtmb(@v)混合宏：
.mtmb(@v) {
margin-top: @v;
margin-bottom: @v;
}调用时.mtmb(@spacing-lg);，语义清楚，改起来也集中。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是混用方向缩写和全写，比如margin: @spacing-sm 0 @spacing-md;——中间缺了margin-right，Less不会报错，但CSS解析可能出人意料；更稳妥的是显式写全margin-top等属性，或统一用四值语法并注释清楚顺序。
- 别在混合宏里默认带单位，保持输入参数干净，比如
.pad(@v)接受@spacing-md而非16px - 如果项目要支持RTL，慎用
margin-left/margin-right，优先用margin-inline-start，但Less目前不原生支持逻辑属性推导，得靠额外变量或JS插件辅助
响应式margin适配：用媒体查询嵌套+变量切换
移动端常需缩小间距，与其复制整套margin规则，不如让变量随断点变化：
@media (max-width: 768px) {
@spacing-md: 4;
.card { margin: @spacing-md * 2; }
}这样@spacing-md在小屏下变成4，乘出来就是8px，和PC端的16px自动区分开。
问题在于Less变量作用域：媒体查询里重定义的变量，只在该块内生效。如果外面还有.btn { margin: @spacing-md; }，它用的还是旧值。所以得把相关样式也包进同一媒体查询，或者改用map结构配合map-get()（Less 4.0+）做动态查表。
- 旧版Less（!important覆盖或拆成独立文件
- 别用
@screen-sm这种模糊命名，明确写@breakpoint-mobile，避免“小屏”到底指480还是768引发歧义 - 测试时记得清缓存——Less编译结果可能被浏览器或构建工具缓存，改了变量没生效，未必是写错了
margin负值也能动态算，但得盯紧渲染行为
负margin在布局中很常见，比如卡片重叠、文字上浮，用margin-top: -@spacing-sm;比写-8px可维护得多。
关键问题是：负值参与运算时，Less不会阻止你写出@spacing-sm * -2这种合法但危险的表达式——它能编译，但可能导致元素完全移出视口或触发意外的重排。
- 建议为负值单独建变量，如
@spacing-neg-sm: -@spacing-sm;，避免运算中频繁出现-号干扰阅读 - Flex/Grid容器里用负margin容易破坏对齐逻辑，尤其当子项有
flex-wrap时，负值可能让换行错乱，此时不如改用gap或transform - IE11及以下不支持
gap，但支持负margin，所以如果还要兼容老浏览器，负值运算反而是更稳妥的动态方案
真正麻烦的不是怎么算，而是哪该算、哪不该动——比如表单控件的垂直对齐，有时margin-top微调1px就能解决，但把它纳入全局间距体系，反而会让其他地方的布局绷得太紧。
