less 3.x 升级到 4.x 是“收边界”而非加功能，收紧语义与校验：除法需括号或 ./、@import 必须带 .less 后缀、颜色/尺寸函数参数须带单位、嵌套中父级 @ 变量不可隐式访问。
Less 3.x 升级到 4.x 不是“加功能”，而是“收边界”——它没有新增 CSS 相关语法特性，反而收紧了原有行为的语义和校验。你写的代码在 v3 能跑，在 v4 报错或输出异常，大概率不是 bug，而是设计意图变了。
除法运算不再自动执行，/ 只是字符
v4 把 / 在括号外彻底视为普通分隔符，不参与计算。这是为避免和 font: 12px/1.5 Arial、background: url(x) no-repeat 0 0 这类原生 CSS 中的 / 冲突。
- 常见错误现象：
width: 100px / 4;编译后原样输出width: 100px / 4;，浏览器忽略该声明 - ✅ 正确写法一：
width: (100px / 4);（推荐，语义明确，支持单位混合） - ✅ 正确写法二：
width: 100px ./ 4;（注意./前后必须有空格；100px./4会报错） - ❌ 错误写法：
width: 100 / 4px;、line-height: 20px / 16px;、(100 / 4)px（单位不能后置）
@import 必须显式带 .less 后缀
v4 默认关闭路径自动补全，@import "mixins" 不再尝试匹配 mixins.less 或 mixins.css，而是严格按字面路径查找。
- 常见错误现象：变量未定义、
ReferenceError: variable is undefined，其实只是文件根本没导入 - ✅ 正确写法：
@import "./variables.less";、@import "~antd/dist/antd.less"; - ⚠️ 使用
~别名前，先确认路径下真实存在.less文件（如 Ant Design v5 已移除所有.less源码，只提供antd.css） - 构建工具如
less-loader需升至 ^11.0.0 才能正确处理这类路径
颜色与尺寸函数参数必须带单位
v4 加强类型校验，把隐式单位推断（比如把 10 当作 10%）全部移除。
- ✅ 正确：
lighten(@color, 10%)、fade(@primary, 20%)、percentage(0.5)、round(10.4px) - ❌ 错误：
lighten(@color, 10)（缺%）、percentage(1/2)（未括起的除法，输出字符串1/2） - ⚠️
round(10.4)合法，但round(10.4px)输出10px—— 单位参与运算时，结果保留第一个单位
嵌套中变量作用域更严格，父级 @ 变量不可隐式访问
v4 强化块级作用域，嵌套选择器内部不再自动继承上层 @ 变量。
- 常见错误现象：
.btn { @size: 12px; &-large { font-size: @size; } }在 v3 可用，v4 报Variable @size is undefined - ✅ 解决方式一：把变量提至全局或文件顶层作用域
- ✅ 解决方式二：用
&显式引用，如&-large { font-size: @size; }改为.btn-large { font-size: @size; }（去掉嵌套） - ⚠️ 注意：这不是语法降级，而是避免隐式依赖带来的维护风险；v4 的作用域规则和 JavaScript 的
let更接近
最容易被忽略的是：这些变化都不是孤立发生的。比如你改了除法写法，但 @import 没补后缀，变量依然找不到；或者函数加了 %，但作用域没调整，照样报错。升级时得一块儿动，不能只修表面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
