SCSS Nesting新版本下的变化

报错信息

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
43  │ ┌     input[value] {
44  │ │         color: $--font-white-second-color;
45  │ │     }
    │ └─── nested rule
... │
51  │       max-height: calc(100vh - 48px);
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    src/layout/components/GlobalSearch/index.vue 51:5  root stylesheet

报错背景

在2023年2月14日，W3C工作组发布了新的CSS规范 CSS Nesting Module，意味着CSS终于也能像SCSS写内嵌样式代码

This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.

当然SCSS也需要及时跟进，为了兼容后续新规范，SCSS在1.77.7版本给各位的控制台报了一大串warning（据说不是全报，5个5个的报，改完5个，再给你报新的，还是有够人性的） 

报错提示：“在即将发布的版本中，Sass对于在嵌套规则后出现的声明的处理方式将发生变化，以匹配CSS的规定行为”

在以前，如果把嵌套规则和声明按照如下方式定义

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}

解析为css时，scss会把所有的声明提升到顶部，解析为如下形式

.example {
  color: red;
  font-weight: normal;
}

.example a {
  font-weight: bold;
}

Css Nesting开始被提出的时候，也是按照scss这种形式。后来，工作组认为按照使用者原有的定义顺序进行应用更好，也即

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}

会变为

.example {
  color: red;
}

.example a {
  font-weight: bold;
}

.example {
  font-weight: normal;
}

修改方法

如此一来，目前scss的解析规则已经和css的解析规则不再适配，为了兼容后续css规范，scss才有此警告信息。当然改法也较为简单，警告内容也给出了详细步骤。

如果你不想升级，简单将本地scss降级为1.77.6

npm i sass@1.77.6 --save

参考

CSS Nesting Module

Sass: Breaking Change: Mixed Declarations