Closed XStarlink closed 3 weeks ago
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
& {}
.
@TomDeSmet Yes, except that these are vuetify's Sass files, not mine, I have no control over their content
@XStarlink Sorry I was addressing the Vuetify crew not you. But that was absolutely not clear from my post :)
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
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
We don't use abs, that must be from something else.
My bad, it's a Bootstrap issue. Monday mistake :)
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
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!