在less中计算动态css列宽，核心做法是调用内置的 percentage() 函数将除法结果转换为百分比，并结合 / 运算符进行数值运算。具体而言，使用 (100% / 3) 这样的表达式即可得到单列宽度，该写法会自动处理单位并输出精确的百分比值。若分母为变量或动态计算值，less编译器会在编译阶段完成算术求值，确保生成的css不包含任何未解析的数学逻辑。
percentage() 如何处理小数与百分比转换
percentage() 函数接收一个小数（如 0.3333）并将其乘以 100 加上百分号，输出为 CSS 合法的百分比字符串。例如输入 0.5 会生成 50%，而输入 1/3 会生成 33.33333%（默认精度）。该函数不关心输入值的原始单位，只关注数值比例，因此常用于将分数形式的布局比例转换为 flex 或 grid 中的 flex-basis 或 width。
.column-width {
width: percentage(1 / 4);
}
/* 编译结果 */
.column-width {
width: 25%;
}
上述代码展示了如何将四分之一宽度转换为百分比。当除数为整数时，Less 会执行浮点除法并保留一定小数位。开发者可直接在样式属性中使用此表达式，无需额外定义中间变量。注意，若除数为零，Less 编译器会报错，需在业务逻辑中避免此类情况。
动态变量作为分母时的计算行为
当分母是 Less 变量时，percentage() 依然能正确计算，前提是变量在编译前已赋值且非零。Less 支持在表达式中混合使用数字、单位和变量，编译器会统一类型后求值。例如，若定义 @cols: 6;，则 percentage(1 / @cols) 会生成 16.66667%。这种机制允许通过修改单一变量来调整整个网格系统的列宽，实现高度可维护的动态布局。
@cols: 6;
.grid-item {
width: percentage(1 / @cols);
}
/* 编译结果 */
.grid-item {
width: 16.66667%;
}
该示例验证了变量分母的可行性。实际项目中，可将 @cols 定义为配置变量，便于主题切换或响应式断点调整。若变量值为字符串或未定义，Less 会抛出编译错误，因此建议在使用前确保变量类型正确。此外，若需控制小数位数，可结合 round() 函数进行舍入，如 percentage(round((1 / @cols) * 10000) / 10000)，但通常默认精度已满足视觉需求。
当列数为奇数时精度对布局的影响
当列数为奇数（如 3 或 5）时，percentage() 输出的百分比包含无限循环小数，Less 默认截断至 5 位小数。这可能导致多列累加时出现微小间隙或溢出，例如三列各占 33.33333%，总和为 99.99999%，剩余 0.00001% 可能引发换行或边框错位。为避免此问题，可在计算后显式设置 box-sizing: border-box 并使用 calc() 补偿，或在 Less 中使用 round() 调整精度。
.odd-cols {
width: round(percentage(1 / 3) * 10000) / 10000;
}
/* 编译结果 */
.odd-cols {
width: 33.33333%;
}
该代码演示了如何通过数学运算控制精度。虽然无法完全消除浮点误差，但通过统一舍入策略可减少累积偏差。在实际布局中，建议结合 display: flex 和 flex-wrap 让浏览器自动处理剩余空间，而非依赖纯百分比累加。若必须使用固定列宽，可考虑使用 fr 单位替代百分比，以获得更精确的分配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
