Less中生成offset类需用递归mixin配合percentage()函数计算百分比，@i从1开始循环至@columns-1，类名拼接支持响应式断点，且须确保父容器布局兼容margin-left偏移。

Less中用循环生成offset类名时，百分比计算容易出错

直接写 @columns * 1% 这类表达式会失败——Less不支持变量参与单位运算。必须显式调用 percentage() 函数，且输入值需为纯数字（不含单位）。常见错误是传入 @i * 1% 或 (@i / @columns) * 100%，结果编译报错或输出无效CSS。

• 正确做法：先算小数比值，再套 percentage()，例如 percentage(@i / @columns)
• 注意 @i 必须从 1 开始（0 偏移无意义），上限建议设为 @columns - 1（满偏移通常不用）
• 若栅格列数可配置（如 @grid-columns: 12），所有循环逻辑都应基于该变量，避免硬编码

用Less递归循环实现offset类的批量生成

Less原生不支持for循环，得靠递归mixin。关键点在于控制终止条件、拼接类名、注入计算后的百分比值。别漏掉 .make-offset-loop() 的出口判断，否则编译卡死。

• 定义基础mixin：.make-offset-loop(@i, @columns) when (@i > 0)，用 when 守卫确保递归停止
• 每轮生成类似 .offset-3 { margin-left: percentage(3 / @columns); } 的规则
• 递归调用写成 .make-offset-loop((@i - 1), @columns)，别写反参数顺序
• 调用入口写成 .make-offset-loop(@grid-columns - 1, @grid-columns)，避开0和满值

offset值必须用margin-left而非left，且需配合float或flex布局

生成的 .offset-* 类只是设置左外边距，它本身不改变文档流定位方式。如果父容器没启用浮动或Flex布局，偏移会失效或引发换行。

• 传统栅格场景下，务必确保父容器有 .row { overflow: hidden; } 或 .row::after 清除浮动
• 若用Flex，.row 需设 display: flex，此时 margin-left 仍有效，但语义上更推荐用 justify-content 或 margin 手动控制
• 不要给offset类加 position: relative 或 left，那会脱离栅格对齐基准线

响应式offset需嵌套媒体查询，不能只靠顶层循环

一套循环只能产出固定断点下的类名。要支持 .offset-md-2、.offset-lg-4，就得在外层再套一层断点循环，且每个断点内独立调用offset生成逻辑。

• 先定义断点map：@breakpoints: xs 0, sm 576px, md 768px, lg 992px, xl 1200px;
• 外层递归遍历断点，内层对每个断点重复执行offset生成逻辑
• 类名拼接用字符串插值：.offset-@bp-@i，其中 @bp 是当前断点名
• 媒体查询必须包裹整个规则块，不能只包属性值——否则Less编译会忽略

实际最易被忽略的是百分比计算的数值精度问题：percentage(5 / 12) 输出 41.66666667%，某些老浏览器解析时可能四舍五入异常。如需严格控制小数位，得用 round() 配合除法，例如 ~"{round((@i / @columns) * 10000) / 100}%"。