Less中percentage()和round()不能直接算栅格宽度，因输出无单位且小数过长（如16.66666667%）易致渲染偏差；应先数值运算再unit(round(...), '%')。
Less里的percentage()和round()为什么不能直接算栅格宽度？
因为Less的数学函数默认按浮点数运算，而CSS宽度要求带单位（如%），且浏览器对小数位过长的百分比（如16.66666667%）可能四舍五入不一致。直接写percentage(1/6)会输出16.666666666666668%，既难读又存在渲染偏差。
真正可用的做法是先用unit()补单位、再用round()控制精度：
.col-2 { width: unit(round(100% / 6 * 2, 4), '%'); }
注意：100% / 6 * 2必须写成数值运算形式，不能把%放在除数位置（100% / 6合法，100 / 6%会报错Operation on an invalid type）。
用for循环生成12列栅格类时，如何避免@i变量作用域污染？
Less没有原生for，得靠递归混合（.make-col()）。常见错误是把计数器@i写成全局变量，导致嵌套调用时值错乱。正确做法是把当前列数作为参数传入，每次递归只处理一个值：
.make-col(@n, @i: 1) when (@i =<p>关键点：</p>
-
@i: 1设默认起始值，但必须显式传参调用，不能依赖外部@i when (@i =是守卫条件，防止无限递归- 每次递归都新建作用域，
@i不会被上层覆盖
响应式断点里用calc()还是Less计算？
别在Less里拼calc()字符串。比如"calc(~'100% - @{gutter}px')"看似能用，但实际编译后变成calc(100% - 20px)——这没问题；可一旦加了除法或变量嵌套，Less无法解析calc()内部表达式，会直接报错Cannot parse inline calculation。
更稳妥的方式是：断点内所有宽度仍用Less算好，仅把需要浏览器运行时计算的（如减去边距）留给calc()：
@gutter: 20px;
.col-md-6 {
width: unit(round(100% / 12 * 6, 4), '%');
margin-left: unit(@gutter / 2, 'px');
/* 不要写 width: calc((100% / 12 * 6) - @gutter); —— Less不认这个 */
}
也就是说：calc()只用于浏览器必须参与的动态计算（如视口相关），栅格基础宽度全部由Less预编译完成。
为什么media查询里的@media (min-width: @sm)有时不生效？
Less变量在@media中会被展开，但若@sm定义为带单位的值（如@sm: 576px），Less会原样输出，没问题；可如果误写成@sm: 576（漏单位），编译后变成@media (min-width: 576)，浏览器直接忽略该规则。
另一个坑是变量作用域：在嵌套规则里引用@sm前没确认它是否已声明。建议统一在入口文件顶部定义断点变量，并用!default防重复赋值：
@sm: 576px !default;
@media (min-width: @sm) {
.col-sm-4 { width: unit(round(100% / 12 * 4, 4), '%'); }
}
还有个隐藏问题：某些构建工具（如旧版webpack-less-loader）对@media内嵌套的混合支持不稳定，遇到编译失败，优先检查是否用了未导出的局部变量。
栅格系统真正的复杂点不在数学函数本身，而在单位传递链——从@columns数到%值，中间每一步都要明确单位归属。少一个unit()，多一个%符号位置错，都可能让整套栅格在某个断点下集体偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
