不能直接套用 Sass 语法改写 Less 文件，否则 @import、@mixin、$color 等写法会全部报错；Less 仅识别 @ 开头变量、.mixin() 声明、无 @use 模块系统，需将 $color 改为 @color、@mixin button 改为 .button()、并用 ~"" 转义 calc 和 CSS 原生函数。
不能直接套用 Sass 语法改写 Less 文件，否则 @import、@mixin、$color 这类写法会全部报错——Less 不识别 $ 变量、不支持 @mixin 声明、也无 @use 模块系统。
把 Sass 风格的变量和 Mixin 改成 Less 能认的写法
Less 只认 @ 开头的变量，且不支持嵌套作用域自动捕获；Sass 的 $color 必须全量替换为 @color，但要注意：未声明就使用的 @missing 在 Less 中会静默转成 0 或空字符串，而 Sass 直接中断编译。Mixins 也不能照搬 @mixin button { ... }，得改成 .button() { ... }，调用时是 .button(); 而非 @include button;。
-
@primary-color: #007bff;是合法 Less 变量；$primary-color: #007bff;会报ParseError: expected selector - 带参数 Mixin 必须显式传参：
.btn-size(@size) { font-size: @size; }，调用写.btn-size(14px);，不能省略括号 - 颜色函数如
darken()参数单位必须带%（darken(@c, 10%)），Sass 写法darken($c, 10)在 Less 里会解析失败
伪类、calc() 和选择器插值容易触发 Less 解析错误
原生 CSS 的 :not(.foo)、calc(100% - 2px) 在 Less 里会被误判为函数调用，导致 ParseError: missing closing ')'。第三方 CSS 文件（比如 antd.css）若直接 @import "antd.css"，Less 会尝试解析其中所有内容，必然炸掉。
-
width: calc(~"100% - 2px");—— 用~""包裹，告诉 Less 别解析，原样输出 -
@import (inline) "antd.css";—— 强制内联，跳过解析，保留原始 CSS - 选择器插值必须用
@{var}，比如.btn-@{size} { ... }；写成.btn-#{$size}（Sass 风格）会直接编译失败
嵌套规则和 & 的行为差异会导致样式错位
Less 的 & 在组合选择器时更“直觉”，但和 Sass 并不兼容。比如 & + & 在 Less 输出两个独立选择器（.btn + .btn），Sass 却要求写成 & + #{&}，否则报错。深层嵌套（>3 层）还会让生成的选择器过长，影响性能和覆盖逻辑。
立即学习“前端免费学习笔记（深入）”；
- 避免写
.a { .b { .c { .d { ... } } } }，优先用 BEM 类名扁平化结构 -
&:hover、&::before是安全的；但& + .other这种相对定位写法要确认是否真需要，它在 Less 中虽能编译，但语义易混淆 - 守卫式嵌套（
& when (@debug = true)）是 Less 特有，Sass 没对应语法，迁移时得提前用条件 mixin 替代
模块依赖和 @import 链必须重理，不能沿用 Sass 的 @use 思路
Less 没有 @use 或命名空间机制，@import 默认是全局拼接。如果每个组件都 @import "base/vars"，变量会重复注入，@import 链过深还可能让 Webpack Less loader 爆栈，热更新整页重刷。
- 只留一个
base.less统一收口变量/Mixin，其他文件用@import (reference) "base.less"防止重复输出 - 禁止在 Mixin 内硬编码
@import "mixins/button"，路径必须相对且由构建工具解析，否则迁移时路径失效 - 第三方 UI 库覆盖样式单独建
vendor-overrides.less，只写.ant-btn { ... }，别@import整个源文件 - 每次编译后检查 CSS 体积，暴涨超 30% 就要查是不是漏了
(reference)修饰
最常被忽略的是：Less 的变量作用域和 Sass 根本不同，没声明就用 @foo 不报错，但结果不可控；而 Sass 报错反而帮你提前发现问题。迁移不是字符替换，是重新梳理样式边界和依赖流向。
