Less 4.x中除法默认不生效，需用括号包裹、右侧为纯数字或math.div()函数；单位运算需注意继承规则，推荐math.div()确保精度与稳定性。
Less 4.x中除法不生效？默认被当作注释处理
Less 4.x 默认把 / 当作 CSS 注释分隔符（如 10px / 2 被忽略），而不是数学运算。这和 Less 3.x 行为不同，也是最常踩的坑——你写了除法，编译后却原样输出或直接消失。
根本原因是 Less 4.x 启用了更严格的 CSS 兼容模式，/ 只有在明确上下文能被识别为运算时才执行计算，否则保留字面量。
- 直接写
width: 100px / 2;→ 编译结果仍是width: 100px / 2;（无效 CSS） - 写成
width: (100px / 2);→ 正确，括号强制触发运算 - 变量参与时也必须括号：
@base: 16px; font-size: (@base / 1.25);
哪些写法能触发除法运算？
Less 4.x 只在以下三种情况把 / 解析为数学除法：
- 被圆括号包裹：
(@a / @b)、(100 / 2) - 右侧是纯数字（不含单位）且左侧可转为数字：
100px / 2不行，但100 / 2可以（结果无单位） - 用
math.div()函数（Less 4.0+ 内置）：math.div(100px, 2)或math.div(@width, @ratio)
math.div() 是最稳妥的选择，尤其涉及单位混合（如 math.div(1rem, 16)）或需要控制精度时。它不依赖括号，也不受空格/换行干扰。
避免单位丢失和精度问题
除法结果的单位继承规则容易出错：只有被除数带单位、除数无单位时，结果才保留单位；否则单位会丢失或报错。
-
(100px / 2)→50px✅ -
(100px / 2px)→ 报错：Cannot divide unitless by px❌ -
math.div(1rem, 16)→0.0625rem✅（推荐用于 rem 基准换算） - 想保留小数位数？用
round()包裹：round(math.div(100px, 3), 2)→33.33px
兼容旧代码的快速迁移建议
如果你从 Less 3.x 升级，大量未加括号的除法会突然失效。别全局搜索替换，先定位高风险场景：
- 字体大小计算：
font-size: @font-base / 1.2;→ 改成font-size: math.div(@font-base, 1.2); - 栅格宽度：
width: 100% / 3;→ 改成width: (100% / 3);（括号足够，无需函数） - 混入（mixin）中带参数的除法：确保所有
/都显式包裹或改用math.div()
真正麻烦的是嵌套计算，比如 (@a / @b) * @c，漏一个括号就全崩。这种场景强烈建议拆成变量 + math.div()，可读性与稳定性都更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
