Less中calc()仅原样输出，自动宽度计算需用percentage()、unit()、round()等内置函数在编译期运算；避免单位混用和旧版兼容问题，关键区分编译期与运行时计算。
Less里怎么用calc()和数学函数做自动宽度计算
Less本身不直接解析calc()里的表达式，它只是预编译器；你写的calc(100% - 20px)会被原样输出，不会提前算出结果。真要“自动计算”，得靠Less的内置函数（比如percentage()、round()、unit()）在编译期做运算，再拼进CSS值里。
常见错误是把Less变量当运行时JS用：@gap: 20px; width: calc(100% - @gap);——这会报错，因为calc()不认Less变量。正确做法是先用Less算好数值，再塞进去，或者干脆不用calc()，让Less直接输出结果。
- 需要响应式留白？用
percentage()把比例转成百分比值：width: percentage(3/4); // → 75% - 要减去固定边距？用
unit()统一单位再运算：@gap: 20; width: (100% - unit(@gap, px)); - 像素值四舍五入避免小数渲染模糊？加
round()：height: round(42.6px); // → 43px
Grid列宽自动分配：用Less循环+数学函数生成flex-basis
手写12列栅格太累，用.col-1到.col-12这种类名，背后靠.each()或for循环生成，但列宽不能硬编码，得按比例自动算。关键是别直接写flex-basis: 8.33333333%;，要用percentage(1/12)这类表达式让Less帮你算准。
容易踩的坑是单位混用：比如@columns: 12; flex-basis: (100% / @columns);看似合理，但Less默认不带单位除法会失败；必须显式用unit()或确保两边单位一致。
- 安全写法：
flex-basis: percentage(1 / @columns); // 输出 8.33333333% - 要支持偏移（offset）？先算基础列宽，再乘偏移数：
margin-left: percentage(@offset / @columns); - IE不支持
flex-basis百分比？那就换width，但注意Flex容器需设flex-wrap: wrap才生效
字体大小响应式缩放：用Less函数实现vw基准+最小最大限制
想让标题随视口变大而变大，又不想用纯vw导致小屏字太小？Less没法运行时监听resize，但可以预设断点区间，用min()和max()函数做编译期裁剪。
典型错误是写font-size: max(16px, min(4vw, 32px));——这行不通，CSS原生max()/min()是运行时函数，Less不处理它们；你得用Less自己的min()函数算出一个确定值，比如font-size: max(16px, 4vw);会报错，因为单位不同无法比较。
- 可行方案：用
@base-vw: 4; font-size: unit(@base-vw * 100vw / 375, px);（假设设计稿375px宽），再用max()/min()限定范围，但必须同单位：font-size: max(16px, min(unit(@base-vw * 100vw / 375, px), 32px)); - 更稳的做法：分断点写死几档，用
@media配合Less变量，避免单位混算 - 注意：所有
vw相关计算最终输出仍是vw单位，Less只负责组合字符串，不替你做运行时适配
兼容性陷阱：哪些Less数学函数在旧版本里不支持
Less 3.5+才支持min()、max()、abs()这些函数；如果你用的是Webpack less-loader默认带的Less 2.x，这些全会报Unrecognised input错误。
另一个隐形坑是percentage()行为变化：Less 3.0之前对小数处理不一致，percentage(0.333)可能输出33.3%或33.333333%，影响布局精度。
- 查当前Less版本：
lessc --version - 降级兼容写法：用
round(0.333 * 100)代替percentage(0.333)，再手动拼% - CI环境容易忽略Less版本差异，建议在
package.json里锁死"less": "4.1.3"这类明确版本
真正难的不是写对一行Less函数，而是想清楚哪些计算该在编译期做、哪些必须留到运行时用JS或CSS原生函数——混在一起就容易两边都失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
