[Style] [All] 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

[WangJincheng4869]

Bug Type: Style

Environment

• Vue Version: 3.4.31
• Element Plus Version: 2.7.6
• Browser / OS: UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0
• Build Tool: Vite

Reproduction

Related Component

• All

Reproduction Link

Link

Steps to reproduce

更新 sass 至 1.77.7 版本，即可看见警告信息

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

   ┌──> node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\mixins\_button.scss
160│     font-size: $font-size;
   │     ^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\button.scss
71 │ ┌   & + & {
72 │ │     margin-left: 12px;
73 │ │   }
   │ └─── nested rule
   ╵
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\mixins\_button.scss 160:3  button-size()
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\button.scss 75:3           @content
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 60:5    b()
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\button.scss 23:1           @use
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\index.scss 13:1            @use
    src\styles\element\index.scss 14:1                                                                                                      @use
    src\styles\index.scss 1:1                                                                                                               root stylesheet

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

   ┌──> node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\mixins\_button.scss
161│     border-radius: $border-radius;
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\button.scss
71 │ ┌   & + & {
72 │ │     margin-left: 12px;
73 │ │   }
   │ └─── nested rule
   ╵
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\mixins\_button.scss 161:3  button-size()
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\button.scss 75:3           @content
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 60:5    b()
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\button.scss 23:1           @use
    node_modules\.pnpm\element-plus@2.7.6_vue@3.4.31_typescript@5.5.3_\node_modules\element-plus\theme-chalk\src\index.scss 13:1            @use
    src\styles\element\index.scss 14:1                                                                                                      @use
    src\styles\index.scss 1:1                                                                                                               root stylesheet

Warning: 347 repetitive deprecation warnings omitted.

What is Expected?

消除警告

What is actually happening?

存在警告

Additional comments

(empty)

[warmthsea]

https://github.com/element-plus/element-plus/issues/17487

[btea]

Duplicate of #17487

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。