Less和Sass在变量作用域、嵌套、循环、错误提示等核心机制上存在根本差异；Less对未定义变量静默转0，Sass则直接报错；变量覆盖依赖import顺序，Sass需显式!default；&+&在Less合法而Sass报错，伪类解析稳定性也不同。
直接说结论：Less 和 Sass 不是“语法换皮”，它们在变量作用域、嵌套规则、循环能力、错误提示机制上存在根本性差异；强行混用或粗暴迁移，90% 的问题出在变量覆盖逻辑和 & 行为上，而不是“写法像不像 CSS”。
变量未定义却静默转 0？这是 Less 的默认行为，不是 bug
Less 遇到未声明的 @color 参与运算（比如 @width: @color * 2），会悄悄变成 0 或空字符串，最终输出 width: 0;；Sass 则直接报错 Undefined variable "$color"。这种静默失败极难定位。
- 检查所有变量是否在使用前已声明，尤其注意
@import顺序 —— Less 中后 import 的文件能覆盖前面同名变量，Sass 必须显式加!default - 迁移时别只把
$替成@，先补全所有!default声明，否则 Sass 编译直接中断 - 用
lessc --lint扫描变量引用，它不会报错但能提示undefined variable警告
& + & 在 Less 里合法，在 Sass 里直接报错
Less 允许写 & + &，编译成两个相邻选择器 .btn + .btn；Sass 认为这是非法语法，报错 Invalid CSS after "&": expected selector, was "+" 。
- 兄弟/相邻选择器必须改写：Sass 用
& + #{&}，Less 保持& + &，二者不能共用同一份 mixin -
&::before这类复合伪类，Sass 解析稳定；Less 在旧版本（.btn:hover::before →.btn:hover::before（正常）或.btn:hover::before（少空格变非法） - 媒体查询内禁止孤立用
&：@media (max-width: 768px) { & { color: red; } }是无效 Less 语法，必须前置选择器
想批量生成响应式工具类？Sass 的 @each 是刚需，Less 得靠递归 mixin
要自动产出 .d-sm-block、.d-md-flex 这类类名，Sass 一行 @each 就搞定；Less 只能靠递归 mixin 模拟，参数错一位或终止条件漏写，编译就卡死或栈溢出。
立即学习“前端免费学习笔记（深入）”；
- Less 递归 mixin 必须带
when守卫，例如.loop(@i, @n) when (@i =，缺 <code>when就无限递归 - Sass 的
@each $bp, $val in $breakpoints天然支持 map 遍历，无需手动计数，也无栈风险 - Less 的 JavaScript 插值（如
@width: `document.body.clientWidth`;）在 Node.js 环境下完全失效，仅限浏览器端，工程中等于不可用
Webpack 里同时配 Less 和 Sass？loader 顺序和文件后缀决定谁生效
常见错误是 lang="less" 的 style 标签被 sass-loader 拦截，或 .scss 文件被 less-loader 处理，结果报一堆语法错误。
- 确保
module.rules中test正则严格区分：/\.less$/对应less-loader，/\.s[ac]ss$/对应sass-loader，不能共用同一 rule - Vue 项目中，
scoped下的lang="less"必须匹配vue-loader的预处理器配置，否则样式不生效也不报错 - 第三方库（如 ant-design-vue）用 Less 写的，就别在项目里混用 Sass 变量；真要共存，用 PostCSS 插件桥接变量，而不是指望预处理器互通
最常被忽略的一点：Less 编译器本身不处理浏览器兼容性，gap、var(--x)、display: grid 这些语法原样输出，IE11 直接失效 —— Autoprefixer 必须在 Less 编译之后运行，顺序错了，前缀就永远加不上。
