Sass 1.77.7混合声明破坏性变更：现有项目高效解决方案问询

针对Sass 1.77.7+触发的混合声明警告，无需大量改写代码或锁定版本，可采用以下几种高效方案：

方案一：自定义兼容包装混入（保留原有输出顺序） #

创建通用的兼容混入，通过@at-root将后续声明转为独立选择器块，既消除警告又完全保留原有样式的输出顺序和优先级。

步骤： #

1. 定义兼容包装混入：

@mixin preserve-order($mixin-name, $args...) {
  // 输出原混入内容（含嵌套规则）
  @include $mixin-name($args...);
  // 将后续声明以独立选择器块输出，保持原有顺序
  @at-root #{&} {
    @content;
  }
}

2. 批量替换原有@include调用：
   将业务代码中触发警告的@include写法，替换为兼容混入的调用形式。例如：
   原代码：

.style-with-mixin {
  @include border(red);
  padding: 20px;
  margin: 10px;
}

替换后：

.style-with-mixin {
  @include preserve-order(border, red) {
    padding: 20px;
    margin: 10px;
  }
}

高效替换技巧：使用编辑器正则批量替换（如VS Code）：

• 查找正则：@include (\w+)\((.*?)\);\s*([\s\S]+?)(?=\}|\/\/|$)
• 替换为：@include preserve-order($1, $2) { $3 }

该方案的优势是完全保留原有样式输出逻辑，侵入性低，适合依赖原有优先级顺序的项目。

方案二：用Stylelint批量自动修复（转为新语法） #

如果项目可以接受适配Sass新的CSS规范兼容行为，可使用Stylelint配合自动修复功能，批量将嵌套规则后的声明包裹到& {}中。

步骤： #

1. 确保项目已安装Stylelint及Sass插件：

npm install stylelint stylelint-scss --save-dev

2. 在.stylelintrc中添加规则：

{
  "plugins": ["stylelint-scss"],
  "rules": {
    "scss/declaration-nested-after-rule": ["always", {
      "except": ["function", "mixin"]
    }],
    "scss/selector-nested-pattern": "^&"
  }
}

3. 运行自动修复命令：

npx stylelint "src/**/*.scss" --fix

此方案会一次性将所有触发警告的代码转为符合新语法的形式，彻底解决警告问题，适合无需严格保留原有输出顺序的项目。

方案三：重写混入内部逻辑（根源解决） #

如果项目中的混入是自定义的，可直接修改混入内部，将嵌套规则移到最后，确保混入输出的内容先包含所有根级声明，再包含嵌套规则。例如：

原混入：

@mixin border($color) {
  border: 1px solid $color;
  &:hover {
    border-color: darken($color, 10%);
  }
}

修改后：

@mixin border($color) {
  // 先输出根级声明
  border: 1px solid $color;
  // 嵌套规则统一放在最后
  &:hover {
    border-color: darken($color, 10%);
  }
}

这样修改后，在调用混入后直接写声明就不会触发警告，因为混入内部没有将嵌套规则插在根级声明中间。该方案适合自定义混入数量较少的项目。

内容的提问来源于stack exchange，提问作者j-carr