less 和 sass 转换无法零误差，核心差异在于变量声明（@/$）、函数参数规则（如 darken）、选择器插值（@{}/#{$}）、& 行为、守卫与循环机制；需统一规范并改用 dart sass 编译。
直接转换 Less 和 Sass（SCSS）代码不可能“零误差”，核心卡点就在变量声明符号和函数调用逻辑——@ 和 $ 不只是换字符，背后是作用域判断、未定义行为、字符串插值规则的系统性差异。
变量声明不能简单全局替换 @ → $
把 @color: #007bff; 改成 $color: #007bff; 看似合理，但漏掉了三个关键事实：
- Less 中未声明就使用的
@missing会静默转为0或空字符串，而 Sass 遇到未定义的$missing直接报错Undefined variable "$missing"，编译中断 - Less 的 mixin 内部若想复用外层
@color，常需显式写@color: @color;“捕获”；Sass 同名$color在嵌套作用域中自动屏蔽外层，无需额外操作 - Less 支持
@{var}做选择器插值（如.btn-@{size}），Sass 必须用.btn-#{$size}，漏掉#会导致语法错误
darken() 这类颜色函数在两者间不兼容
Less 和 Sass 都有 darken()，但参数类型、返回值精度、甚至是否接受单位都不同：
- Less 的
darken(@color, 10%)要求第二个参数带%单位；Sass 的darken($color, 10)是纯数字（0–100），单位隐含 - Less 的
lighten(@color, 5px)会静默失败（返回原色），Sass 则直接报错Invalid argument - Less 不支持 Sass 的
rgba($color, 0.8)这种带 alpha 的简写，得拆成fade(@color, 80%)
嵌套规则中 & 的行为差异容易引发样式错乱
& 看似通用，但实际解析逻辑不同，尤其在组合选择器时：
- Less 允许
& + &，生成两个独立选择器（.btn + .btn），符合直觉 - Sass 中
& + &是非法语法，必须写成& + #{&}才能产出相同结果，否则报错Invalid CSS after "&": expected selector, was "+" - Less 支持守卫式嵌套：
& when (@debug = true) { color: red; }；Sass 没有对应语法，必须提前用@if包裹整个规则块
条件与循环无法直接迁移，Sass 功能更底层
Less 没有原生 @if 或 @for，所有逻辑靠递归 mixin 模拟，这导致：
- 批量生成断点类（如
.col-1到.col-12）在 Sass 中一行@for $i from 1 through 12 { .col-#{$i} { ... } }即可；Less 必须写带终止条件的递归 mixin，易栈溢出且难调试 - Less 的匹配模式（
.mixin(heavy, @val) { ... }）类似简易@if，但不支持布尔表达式或复合条件，Sass 的@if $cond and $other更接近真实编程逻辑 - 编译后 CSS 体积上，Sass 的原生循环通常更精简；Less 递归 mixin 可能因展开深度不够，漏生成某些预期类名
真正平滑转换不是靠正则替换，而是先统一变量命名规范、禁用 Less 特有守卫和递归写法，再用 Dart Sass 替代 node-less 编译——因为旧版 Ruby Sass 已停更，而 Dart Sass 对 SCSS 语法的容错和提示更准，能提前暴露那些被 Less 静默吞掉的错误。
