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 做不到。


















