升级Sass 1.77.8后出现Mixin警告的处理方案咨询

升级Sass至1.77.8版本后，项目中会大量触发如下警告：

Sass对嵌套规则后声明的处理行为将在后续版本中变更以匹配CSS规范。如需保留现有行为，请将声明移至嵌套规则上方；如需启用新行为，请将声明包裹在& {}中。

典型受影响代码场景 #

原代码：

.infoItem {
    &:not(:last-child) {
      margin-bottom: 32px;
    }

    max-width: 190px;

    @include Breakpoints.smallerThan('md') {
      max-width: none;
      margin: 0 15px 32px 0;
    }
 }

启用新行为的修改后代码：

.infoItem {
    &:not(:last-child) {
      margin-bottom: 32px;
    }

    & {
      max-width: 190px;
    }

    @include Breakpoints.smallerThan('md') {
      max-width: none;
      margin: 0 15px 32px 0;
    }
}

全项目修改此类代码工作量极大，回退版本仅为临时方案（后续版本会将此作为破坏性变更），调整代码顺序的工作量同样可观。

此外，如下Mixin代码也触发了相同警告：

@mixin h2-spacing() {
  margin-top: 60px;
  margin-bottom: 5px;
}

核心疑问解答：Mixin是否需要包裹& {}？ #

需要，原因如下：

• 当该Mixin被嵌套在其他选择器的嵌套规则之后调用时，会触发警告。例如以下代码场景：

h2 {
  &.special {
    color: red;
  }
  @include h2-spacing();
}

此时Mixin内的声明属于“嵌套规则后出现的顶级声明”，和.infoItem中max-width的情况完全一致。

• Sass的行为变更针对所有在嵌套选择器之后出现的顶级声明，无论这些声明是直接编写还是通过Mixin引入。只要Mixin的调用位置符合“嵌套规则后”的场景，内部声明就会触发警告，后续版本也会按新规则解析。

临时缓解方案（仅作过渡） #

若暂时无法全量修改，可通过Sass的--quiet-deps参数屏蔽警告，但这只是临时手段，建议逐步完成代码迁移以适配后续版本的破坏性变更。

内容的提问来源于stack exchange，提问作者Anniken