less中百分比无法直接参与算术运算，因%被视为不可计算的单位类型；需统一用小数表示（如1代表100%）或用calc()交由浏览器处理，避免单位混用报错。
Less里用百分比做运算，为什么结果不是想要的数字？
Less对单位的处理很严格：%、px、em不能混着算，一加就报错或返回意外值。比如写 @w: 100% - 20px，Less直接抛出“Operation on an invalid type”错误——它不认为%是可参与算术的数值。
- 想用百分比参与计算，必须先转成纯数字：用
percentage()把小数转成带%的字符串，或用unit()剥离单位再运算 - 更稳妥的做法是统一用小数（如
1代表100%），最后再套%：比如(1 - @gutter / 12) * 100%，前提是@gutter和12单位一致 - 别依赖浏览器解析时的“自动换算”，Less编译阶段就卡死了，错误发生在CSS生成前
响应式栅格中，如何让col-width = (100% - gutter × 2) ÷ 3？
这是典型需求，但直接写(100% - 20px * 2) / 3会失败。Less不支持跨单位除法，%除以数字没问题，但%减px不行。
- 把gutter定义为无单位小数（如
@gutter: 0.016666;），然后写((1 - @gutter * 2) / 3) * 100% - 或者用
calc()兜底：Less只拼字符串，width: calc(~"(100% - @{gutter} * 2) / 3")，但注意这会把计算甩给浏览器，Less不校验语法 - 如果gutter是
px值且容器宽度固定（比如1200px），那就全换成px算：(1200px - @gutter * 2) / 3，再用unit()确保输出单位
Less变量带单位参与乘除，为什么有时结果没单位？
Less的单位继承规则很隐晦：两个带单位值相乘，结果单位是单位乘积（如2px * 3em → 6px*em）；但除法中若单位能约掉，结果就是纯数字。比如20px / 10px → 2，不是2px。
- 输出CSS需要单位时，必须显式补上：用
unit(@val, px)或拼接@val + px -
100% / 2结果是50%（单位保留），但100px / 2结果是50（单位丢失），容易漏掉 - 用
isunit(@val, px)提前判断单位是否存在，避免后续计算崩掉
用Less写媒体查询断点，怎么避免重复计算和维护困难？
把断点值硬编码在每个@media里，改一个就得搜全项目。更麻烦的是，像min-width: (@container-width / 2) + 1这种表达式，如果@container-width是1200px，结果是601px，但你得记住这个601不是魔法数字，而是推导来的。
- 所有断点统一定义为变量，且带单位：
@breakpoint-md: 768px;，而不是@breakpoint-md: 768; - 计算类断点（如“容器宽一半加1px”）单独封装成函数：
.bp-half-plus-one(@container) { @val: unit(@container / 2 + 1, px); } - 别在
@media里直接写复杂表达式，先算好赋给变量，再引用——既方便调试，也避免Less解析深度不足报错
单位混用和隐式类型转换是Less响应式计算里最常卡住的地方，不是语法不会写，而是不知道它在哪一步悄悄把单位吃掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
