在 less 4 中，要启用严格数学运算模式并改写旧版 css 代码，核心做法是将所有除法表达式显式包裹在 `calc()` 函数中，并确保参与计算的数值带有明确的单位。这样做可以消除 less 3 及更早版本中基于上下文推断除法的歧义，使编译行为与原生 css 完全一致。
如何识别需要修改的除法语法
在旧版 Less 代码中，开发者常直接使用 `/` 符号进行尺寸计算，例如 `width: 100px / 2;`。Less 3 会尝试根据上下文判断这是否是数学运算，如果结果被用于非长度属性或单位不匹配，可能会报错或产生意外结果。在严格模式下，这种写法会被直接视为 CSS 字符串输出，导致样式失效。因此，必须将所有涉及数值计算的除法替换为 `calc()` 包装形式。
@base-width: 100px;
.container {
width: calc(@base-width / 2);
margin-left: calc(10px / 2);
}上述代码在 Less 4 中编译后，将生成标准的 CSS `calc()` 表达式，确保浏览器正确解析数学逻辑。注意，变量引用如 `@base-width` 必须带单位，否则无法参与数学运算。
立即学习“前端免费学习笔记（深入）”；
如何处理混合单位与变量的除法
当除法操作涉及不同单位或无单位变量时，旧版 Less 可能通过隐式转换处理，而新版则要求更严格的类型检查。例如，`100% / 2` 是合法的，但 `100 / 2`（无单位）若用于长度属性则会失败。解决方案是在变量定义时明确单位，或在 `calc()` 内部使用兼容的单位组合。
$ratio: 0.5;
.element {
width: calc(100% * $ratio); // 乘法无需 calc，但除法需显式
height: calc(50vh / 2);
}此段代码展示了百分比与视口单位的除法处理。关键在于，任何除法都必须放在 `calc()` 中，且操作数必须是可计算的数值。对于无单位变量，建议将其定义为比例因子而非绝对值，以避免单位冲突。
严格模式下未带单位变量的处理结果
在严格数学运算模式下，如果变量未携带单位，例如 `@size: 100;`，直接用于长度属性如 `width: @size;` 会导致编译错误，因为 Less 无法确定其物理意义。即使包裹在 `calc()` 中，如 `width: calc(@size / 2);`，也会因缺少单位而失败。正确的做法是为变量赋予默认单位，或使用 `unit()` 函数强制转换。
@size: 100px; // 必须带单位
.width {
width: calc(@size / 2);
}若变量确实无单位，应先用 `unit(@var, px)` 转换为像素，再参与计算。这确保了编译过程的确定性，避免了运行时样式异常。
