less 4 中除法需用括号包裹，如 width: (100px / 12)；单位参与运算时变量应无单位，用 percentage(1 / @n) 计算栅格列宽；像素值须 round() 防非法小数。
Less 4 除法不生效？先确认是否用了 / 而没加括号
Less 4 默认启用 math: always 模式，/ 在括号外不再被识别为除法运算符——它会被原样保留或报错。比如写 width: 100px / 12;，编译结果可能是字面量 100px / 12，浏览器直接忽略该声明。
必须显式用小括号包裹：
width: (100px / 12); → 输出 width: 8.33333333px;
- 推荐统一用括号写法，兼容性高、意图明确
- 避免用
./（如100px ./ 12），虽能强制除法但可读性差，且容易和注释//混淆 - EasyLess 插件 1.7.0+ 已跟随 Less 4 行为，旧写法在新环境必然失效
列宽计算别用 calc() 或手写百分比，坚持 percentage(1 / @n)
响应式栅格中算单列宽度，percentage(1 / @n) 是唯一能在编译期生成合法 CSS 百分比字符串的方式。它确保 12 列总和严格等于 100%，而其他方式极易出错：
-
100% / @n→ 编译后常为字面量100% / 12，无效 -
calc(100% / @n)→ 依赖运行时，且旧版 Less 会报错或透传失败 - 手写
8.33333333%→ 易输错、难维护、12 列加起来可能变成 99.9999996%
正确模式：
@grid-columns: 12;<br>
@col-width: percentage(1 / @grid-columns);<br>
.col-3 { width: ~"(@{col-width} * 3)"; }
单位参与除法时，分子分母必须同类型或无单位
Less 对单位极其敏感，带单位的变量直接相除会触发 Operation on an invalid type 错误。例如等比容器常用 padding-top: percentage(@h / @w)，但若定义成 @h: 9px; @w: 16px; 就会崩。
- ✅ 正确：变量只存数字，单位在使用时加 ——
@ratio-h: 9; @ratio-w: 16; padding-top: percentage(@ratio-h / @ratio-w); - ❌ 错误：变量自带单位 ——
@ratio-h: 9px;，哪怕后面用unit(@ratio-h, "")也无法剥离单位用于除法 - ⚠️ 注意顺序：
percentage(9 / 16)是 56.25%，而percentage(16 / 9)是 177.777%，倒过来就完全错了
像素类计算记得 round()，否则输出非法小数
像间距、圆角、尺寸这类最终要转成 px 的值，如果不 round()，Less 可能输出 12.944px 这种非法值——浏览器渲染模糊甚至丢弃整条规则。
-
@spacing-base: 8px;<br> @spacing-md: round(@spacing-base * 1.618);
→ 得13px - 别写
@phi: (1 + sqrt(5)) / 2：Less 没有sqrt()，会编译失败；可用近似值@phi: 1.618; -
round(percentage(9 / 16), 2)可控精度，适合适配图片比例（如输出56.25%）
真正容易被忽略的是作用域：媒体查询内重定义变量不会影响外部，所有计算必须自包含；还有 unit() 只能加单位不能拆单位，想从 32px 提取数字 32 做二次运算？Less 做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
