less 4.x 升级后存在四大兼容性问题：除法必须加括号或用 ./；@import 必须带 .less 后缀；嵌套中无法访问父级 @ 变量；颜色/数学函数参数必须带单位。

会，但不是因为“样式被删了”，而是编译行为变了——旧写法在 Less 4.x 下不再计算、不报错、不提示，直接原样输出成非法 CSS，浏览器静默丢弃整条声明。

---

除法不加括号 → 编译后还是 /，浏览器当语法错误扔掉

Less 4.x 彻底移除了对裸露 / 的数学解析逻辑。你写 width: 100px / 4;，它就真输出 width: 100px / 4;，不是计算成 25px。

• 浏览器看到这种写法，直接划掉该行（DevTools 中显示为灰色 strikethrough）
• line-height: 20px / 16px; → 行高失效，无任何控制台警告
• @gap: 1rem / 2; → 变量值变成字符串 "1rem / 2"，后续所有引用都崩
• 唯一安全写法只有两种：(100px / 4)（推荐）或 100px ./ 4（注意 ./ 前后必须有空格）

---

@import 不带 .less 后缀 → 找不到文件，变量未定义

Less 4.x 关闭路径推测机制，@import "mixins" 不再尝试匹配 mixins.less 或 mixins.css，而是严格按字面路径查找。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• @import "./variables"; → 报 ReferenceError: variable is undefined
• @import "./variables.less"; → 正确
• @import "~antd/dist/antd.less"; → 要先确认该路径真实存在（Ant Design v5 已移除所有 .less 源码）

---

嵌套中访问父级 @ 变量 → 直接报 Variable is undefined

Less 4.x 强化块级作用域，嵌套选择器内部不再继承上层 @ 变量。

• .btn { @size: 12px; &-large { font-size: @size; } } → 编译失败
• 解决方式只有两个：
  • 把变量提至文件顶层（如 @size: 12px; 放在最上面）
  • 在嵌套块内重新声明（如 &-large { @size: 12px; font-size: @size; }）

---

颜色/数学函数参数缺单位 → 编译报错，不是警告

Less 4.x 移除了隐式单位推断，所有数值型参数必须是合法数值类型（含单位或百分比）。

• lighten(@color, 10) → 报错：Operation on an invalid type
• lighten(@color, 10%) → 正确
• percentage(1/2) → 输出字符串 "1/2"，应写成 percentage((1/2)) 或 percentage(0.5)
• round(10.4) → 返回纯数字 10（无单位），而 round(10.4px) → 返回 10px

真正难排查的，是那些不报错、不中断构建、却让样式静默消失的地方：一个漏掉的括号、一行错位的注释、一个没加单位的函数调用——它们都不会打断 CI，但上线后用户就看不到正确样式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！