如何在CSS中兼容Less 4的除法语法

Less 4.x 中 / 不再是除法运算符，而是被硬编码为 CSS 字面量；唯一有效写法是 (100px / 4) 或 100px ./ 4（注意空格），变量定义处必须加括号，math 和 strictMath 配置均无法修复该行为。

Less 4.x 中 / 不再是除法运算符

不是配置没配对、也不是插件没更新，而是 Less 4.x 编译器硬编码把所有未包裹的 / 当作 CSS 字面量处理。你写 width: 100px / 4;，它就真输出 width: 100px / 4; —— 浏览器看到非法 CSS，直接静默丢弃整条声明，DevTools 里显示为灰色划掉，控制台零报错。

(a / b) 和 a ./ b 是仅有的两种有效写法

必须二选一，没有第三种路径：

1. (100px / 4)：推荐。语义清晰，支持嵌套如 (2rem / 2)，单位兼容稳定
2. 100px ./ 4：注意前后必须有空格：100px ./ 4 ✅，100px./ 4 ❌，100px ./4 ❌
3. 反例：(100 / 4)px → 报 Operation on an invalid type；100 / 4px → 单位位置错，结果不可预期

变量参与除法时，括号必须写在定义处，不是使用处

很多人以为只在用的地方加括号就行，其实错在变量赋值那一行：

1. ❌ @gap: 1rem / 2; → 编译失败或输出无效 CSS
2. ✅ @gap: (1rem / 2); → 正确，后续 grid-gap: @gap; 才能生效
3. 同理：@n: (@cols / 2);，否则 repeat(@n, 1fr) 会中断编译

math 配置项已失效，别白配

math: "always"、math: 0、math: "parens" 全部被 Less 4.x 忽略。目前只认整数 math: 1 或 math: 2，但它们不改变除法是否执行：

1. math: 1：仅提示编译器“允许解析无括号除法”，但依然不计算，最终还是输出原样
2. math: 2：强制报错 100px / 4，倒逼你改写，但不会自动修复
3. Vite 中 css.preprocessorOptions.less.math = "always" 完全无效
4. strictMath 和除法行为无关，它只管无单位数值能否参与加减

最容易漏掉的是媒体查询和 Grid 布局里的变量除法——它们藏得深，出问题时 CSS 文件里直接缺失整条规则，连错误提示都没有。检查生成的 CSS，找有没有残留的 / 出现在非 font 或 background 属性里，就是最准的验证方式。