Less变量影响grid-gap需显式带单位（如@gap: 16px），否则编译为无效CSS；可用unit()函数动态计算，但不可直接在calc()中混用Less变量，旧浏览器兼容需同时声明grid-row-gap、grid-column-gap和grid-gap。
Less变量如何影响grid-gap的计算值
直接用Less变量赋值给grid-gap是可行的，但必须注意单位一致性。Less不会自动补单位，@gap: 16和@gap: 16px在编译后行为完全不同：前者生成grid-gap: 16（无效CSS），后者才是合法值。
推荐始终带单位声明变量，避免隐式拼接出错：
@gap-sm: 8px;
@gap-md: 16px;
@gap-lg: 24px;
<p>.grid-small { grid-gap: @gap-sm; }
.grid-medium { grid-gap: @gap-md; }
用函数动态生成grid-gap响应式断点
单纯变量不够灵活，比如需要“小屏减半、大屏加25%”这类逻辑。Less函数能封装计算，比重复写@gap-md * 1.25更可控。
- 定义带计算的函数：
.gap-scale(@base, @factor) { grid-gap: unit(@base * @factor, px); } - 调用时传入基础值和系数：
.grid-wide { .gap-scale(16, 1.25); }→ 编译为grid-gap: 20px - 注意
unit()必须显式指定单位，否则乘法结果无单位，CSS不认
为什么grid-gap不能用calc()混搭Less变量
Less在编译期求值，calc()是浏览器运行时计算，两者不能直接嵌套。写grid-gap: calc(@gap-md + 4px)会报错，因为Less试图把calc()当字符串处理。
正确做法分两种场景：
- 纯编译期调整：用Less运算，如
grid-gap: (@gap-md + 4px) - 需运行时响应：改用CSS自定义属性，Less只负责注入值：
:root { --gap: @{gap-md}; } .grid { grid-gap: calc(var(--gap) + 4px); } - 混合方案风险高——Less变量进
calc()必须用插值~"calc(@{gap-md} + 4px)"，但容易漏掉引号或@{}，调试困难
GridGap动态调整时容易忽略的兼容性陷阱
grid-gap在旧版浏览器中实际是grid-row-gap和grid-column-gap的简写，而Less变量无法条件编译多套属性。如果项目还需支持IE或老版Edge，不能只靠一个grid-gap。
稳妥做法是同时输出两套：
.grid-flexible {
grid-row-gap: @gap-md;
grid-column-gap: @gap-md;
grid-gap: @gap-md; // 覆盖现代浏览器
}
另外，Sass用户常误以为Less也支持gap（无前缀）属性，但Less本身不处理CSS前缀，得靠Autoprefixer后续补全，别指望变量能触发厂商前缀注入。
