Less 3 升级需处理 strictMath、伪类解析、@import 三大变化：启用 strictMath 后除法须加括号，伪类需波浪号包裹，@import 需明确修饰符（如 inline、reference）并收口路径与作用域。
直接把 .css 改成 .less 并用 lessc 编译，Less 2 能过，Less 3 会大量报错——核心差异在解析器行为：Less 3 默认启用 strictMath: true 和更严格的函数识别逻辑，:not(.foo)、calc(100% - 2px) 这类原生 CSS 片段会被当作函数调用而中断编译。
Less 3 的 strictMath 导致除法和 calc 失败
Less 3 默认开启 strictMath: true，意味着所有数学表达式必须显式包裹在括号中，否则像 10px / 2 或 width: 100% / 2 会直接报错，而不是降级为字符串。老项目里满屏的无括号除法、裸 calc() 都会炸。
- 把所有
calc(100% - 2px)改成calc(~"100% - 2px")，避免 Less 提前解析 - 把所有
margin: 10px / 2改成margin: (10px / 2)（加括号）或@{margin-half}（抽变量） - Webpack 用户在
less-loader配置中临时关掉严格模式：lessOptions: { strictMath: false }，仅用于过渡期 - 禁用
strictUnits: true（Less 3 默认值），否则10px + 2em这类混合单位直接报错
伪类与函数名冲突导致 ParseError
Less 3 解析器对冒号后紧跟括号的语法更敏感，:not(.foo)、:nth-child(2n)、url(data:image/svg+xml,...) 都可能被误判为函数调用，报 ParseError: missing closing ')'。
- 所有含括号的伪类、伪元素、
url()、attr()必须用波浪号包裹：:not(~".foo")、url(~"data:image/svg+xml,...") - 不要写
@import "reset.css"，改用@import (inline) "reset.css"，否则 Less 3 会尝试解析其中的伪类 - 第三方 CSS 文件（如
normalize.css）一律走@import (inline)，不参与 Less 编译流程 - 检查编译输出里是否出现
.foo :not(.bar) { ... }这种被拆开的选择器——说明解析器已错误介入，需回退处理
@import 行为变化引发样式覆盖和体积暴涨
Less 2 对 @import 比较宽容，Less 3 更严格遵循作用域和嵌套规则。未加修饰的 @import "mixins.less" 在多个文件中重复出现，会导致 Mixin 多次展开、CSS 重复输出；跨目录相对路径解析也更脆弱。
- 所有基础变量和 Mixin 统一收口到
base.less，其他文件只用@import (reference) "base.less"引入（不输出 CSS） - 禁止在 Mixin 内部写
@import，尤其是动态路径如@import "@{theme}/colors.less"，Less 3 不支持运行时路径拼接 - Webpack 用户必须在
lessOptions.paths中显式添加所有依赖路径，否则@import "utils/breakpoints"会静默失败 - 用
grep -c "media.*max-width"扫描输出 CSS，若媒体查询重复出现超 3 次，说明@import (reference)漏了
最难的不是改语法，是让每个 @import 都明确知道自己该不该输出、该在哪一层作用域生效——Less 3 把“隐式行为”全砍掉了，你得亲手补上所有边界声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
