[Bug Report][3.6.12] sass deprecation warnings after update to [email protected]

[XStarlink]

Environment

Vuetify Version: 3.6.12
Last working version: 3.6.12
Vue Version: 3.4.31
Browsers: Chrome 126.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

1. Open the repro
2. npm run dev
3. Look at the dev console and see many many Sass Deprecation Warnings

Expected Behavior

No Sass Deprecation Warning

Actual Behavior

Sass Deprecation Warnings

Reproduction Link

https://stackblitz.com/edit/nuxt-vuetify-setup-gacyac?file=package.json

Other comments

Hi, just to let you know, I've had a lot of Deprecation Warnings from Sass since I updated to the latest version v1.77.7.

Thanks for your work!

[TomDeSmet]

I get a lot of warnings about a future update of SASS. It's a pretty easy solution by changing the bundled SASS files:

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 & {}.

[XStarlink]

@TomDeSmet Yes, except that these are vuetify's Sass files, not mine, I have no control over their content

[TomDeSmet]

@XStarlink Sorry I was addressing the Vuetify crew not you. But that was absolutely not clear from my post :)

[donalmurtagh]

I've pasted the deprecation warning below in the hope that people who search for it might find this issue

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/vuetify/lib/styles/tools/_border.sass
4  │     border-width: $width if($important, !important, null)
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules/vuetify/lib/components/VChip/_mixins.scss
79 │ ┌     &.v-chip--density-#{$density} {
80 │ │       @if meta.type-of($properties) == "list" {
81 │ │         @each $property in $properties {
82 │ │           #{$property}: $value;
83 │ │         }
84 │ │       } @else {
85 │ │         #{$properties}: $value;
86 │ │       }
87 │ │     }
   │ └─── nested rule
   ╵
    node_modules/vuetify/lib/styles/tools/_border.sass 4:3     border()
    node_modules/vuetify/lib/components/VChip/VChip.sass 25:5  @content
    node_modules/vuetify/lib/styles/tools/_layer.scss 9:5      layer()
    node_modules/vuetify/lib/components/VChip/VChip.sass 5:1   @use
    plugin-vuetify:components/VChip/VChip.sass 2:1            root stylesheet

[TomDeSmet]

One more deprecation warning remains with the new 3.6.14 release:

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

[KaelWD]

We don't use abs, that must be from something else.

[TomDeSmet]

My bad, it's a Bootstrap issue. Monday mistake :)