更新依赖后，SASS 会报警告

[i-mufeng]

警告内容

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

    ╷
26  │ ┌   &::before {
27  │ │     content: "";
28  │ │     inset: 0;
29  │ │     position: fixed;
30  │ │     top: 0;
31  │ │     z-index: -1;
32  │ │     background-image: url(./bg.png);
33  │ │     background-repeat: repeat;
34  │ │     min-height: 100%;
35  │ │   }
    │ └─── nested rule
... │
37  │     min-height: 100vh;
    │     ^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules\.pnpm\@sugarat+theme@0.4.7_@element-plus+icons-vue@2.3.1_vue@3.4.32_typescript@5.5.3___element-plus_uqszywcs5zbgipg4bfiuqwuag4\node_modules\@sugarat\theme\src\styles\index.scss 37:3  root stylesheet

依赖版本

{
    "@element-plus/icons-vue": "^2.3.1",
    "@sugarat/theme": "^0.4.7",
    "element-plus": "^2.7.7",
    "markdown-it": "^14.1.0",
    "pagefind": "^1.1.0",
    "vitepress-markdown-timeline": "^1.2.1",
    "vitepress-plugin-pagefind": "^0.4.5",
    "vue": "^3.4.32"
}

我的解决方案

在博客背景配置也遇到了相同的警告

.VPHome {
  // 自定义首页背景图
  &::before {
    background-image: var(--mf-bg-url);
    background-size: cover;
  }
  // 定义遮罩样式
  background: radial-gradient(
    ellipse,
    rgba(var(--bg-gradient-home), 1) 0%,
    rgba(var(--bg-gradient-home), 0) 150%
  );
}

修改后

.VPHome {
  // 自定义首页背景图
  &::before {
    background-image: var(--mf-bg-url)
    background-size: cover
  }
  & {
    // 定义遮罩样式
    background: radial-gradient(
      ellipse,
      rgba(var(--bg-gradient-home), 1) 0%,
      rgba(var(--bg-gradient-home), 0) 150%
    )
  }
}

[i-mufeng]

我也不知道我这种解决办法是否合理

[ATQQ]

应该是大差不差 ，我下来迭代一下

译文：弃用警告：Sass对嵌套后出现的声明的行为 规则将发生变化以匹配CSS在即将到来的 版本。要保留现有行为，请将声明移到嵌套的上方 规则。要选择加入新行为，请将声明包装在 & {}

这里面有细节 https://sass-lang.com/d/mixed-decls

方便得话你可以来PR 修改一下 嘿嘿，应该就是 把 样式的声明前移 或者 按你说的 加 & 包裹

.VPHome{
  min-height: 100vh;
  // xxxx
}

[i-mufeng]

感谢解答，我再去深入学习一下 ❤️