sass和less在变量作用域、嵌套选择器&用法、函数兼容性及构建生态上存在本质差异：sass作用域严格、!default可控、&要求空格、函数类型安全；less变量懒求值易覆盖、&解析宽松、函数参数和返回值不一致、loader配置逻辑不同。
Sass 和 Less 在变量声明上到底差在哪
变量是预处理器最常用的功能，但 Sass 的 $color-primary 和 Less 的 @color-primary 不只是符号不同——它们的**作用域规则和覆盖行为完全不同**。
Less 变量是“懒求值”，同名变量后声明的会覆盖前声明的，哪怕在嵌套块里；Sass 的 $color-primary: red !default 则只在未定义时生效，且作用域严格按嵌套层级继承。
- Less 中
@width: 100px;再写一次@width: 200px;，后面所有引用都是200px，不管是否在{ }里 - Sass 中
$width: 100px;在@mixin内部重定义，外部不受影响；但没加!default的$width: 200px;会直接报错“already declared” - 编译后 CSS 体积几乎无差别，但 Sass 的作用域更可控，Less 更容易因变量意外覆盖导致样式错乱
嵌套选择器里的 & 符号用法陷阱
& 是两者都支持的父选择器引用符，但 Less 对它的解析更宽松，Sass 更严格——这直接导致迁移时大量样式失效。
比如 .btn { &--primary { color: blue; } }，Sass 编译为 .btn--primary，Less 默认也一样；但一旦写成 .btn { &:hover { ... } }，Less 允许省略空格（&:hover），Sass 要求必须有空格（&:hover 合法，&:hover 没空格会报错）。
立即学习“前端免费学习笔记（深入）”；
- Less 中
&.disabled和& .disabled都合法，前者生成.btn.disabled，后者生成.btn .disabled - Sass 中
&.disabled合法，但& .disabled（带空格）会被当成两个独立选择器，编译出错 - 真实项目中，团队混用空格习惯时，Less 更易“悄悄编译成功但结果不对”，Sass 报错反而早暴露问题
函数和颜色操作的实际兼容性断层
看起来都有 lighten()、darken()，但参数含义和返回值类型不一致——尤其在处理透明度或 HSL 色彩空间时，输出可能完全偏离预期。
Less 的 lighten(@color, 10%) 是在 HSL 空间调整亮度通道；Sass 的 lighten($color, 10)（注意单位是数字而非百分比）是在 HSL 中调整 L 值，但底层实现对边界值（如纯黑 #000）的处理逻辑不同：Less 会卡在 0%，Sass 可能溢出并转成灰色。
- Less 中
fadeout(#000, 50)表示透明度设为 50%，Sass 对应的是transparentize(#000, 0.5)，不是fade-out()（该函数已废弃） - Sass 支持原生
rgb()、hsl()函数返回颜色对象，可参与运算；Less 的rgb()只是字符串拼接，无法和lighten()连用 - 涉及设计系统中多主题色自动推导时，Sass 的类型安全和函数链式调用更稳，Less 容易在中间步骤隐式转成字符串后崩掉
Webpack 和 Vite 下的 loader 生态现实差异
别只看文档说“都支持”，实际集成时 Sass 的 sass-loader 和 Less 的 less-loader 对配置项的响应逻辑完全不同，尤其在 source map、@import 解析和自定义函数注入上。
Vite 默认用 less 包直编译，但不支持 Less 的 javascriptEnabled: true（用于运行 JS 表达式），而 Sass 的 dart-sass 从 1.3.0 起彻底移除了 JS API，强制用纯 Dart 实现函数——这意味着你不能再用 require() 动态读取 JSON 主题配置。
- Webpack 项目中，
sass-loader的additionalData可注入全局变量，less-loader同名选项叫additionalData但只支持字符串，不支持函数回调 - 使用
@import '~package/styles/mixins'时，Sass 要求路径存在且文件扩展名明确（_mixins.scss），Less 默认尝试.less、.css、无后缀三种，更容易误加载错误文件 - CI 环境里，Dart Sass 编译速度明显快于 Node Sass（已停更），但 Less 仍依赖较老的 less.js，高并发编译时内存占用更不稳定
真正难的不是语法转换，是当设计系统要求主题色从 JSON 动态生成、同时要支持 RTL 自动翻转、还要兼容 IE11 的 filter 回退方案时，Sass 的模块系统和函数类型约束能兜住大部分边界，Less 的松散解析会在第 3 个嵌套层级突然崩出一个无法定位的 ParseError。
