SASS deprecation warming

[phil-w]

I'm not quite sure which update caused this, but I'm getting a deprecation warning., as below. Well the original is in beautiful console colour, but you get the general idea.

We can read all about it but I think I can't fix it.

I'm using a my-bulma.scss file which imports the various files like this: @forward "bulma/sass/components/modal";

It still seems to work, but it's noisy and presumably will stop eventually. Thanks

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\bulma\sass\components\navbar.scss
257 │     align-self: center;
    │     ^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules\bulma\sass\utilities\mixins.scss
213 │ ┌       &:nth-child(3),
214 │ │       &:nth-child(4) {
215 │ │         opacity: 0;
216 │ │       }
    │ └─── nested rule
    ╵
    node_modules\bulma\sass\components\navbar.scss 257:3  @forward
    src\styles\my-bulma.scss 31: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\bulma\sass\components\navbar.scss
258 │     margin-inline-start: auto;
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules\bulma\sass\utilities\mixins.scss
213 │ ┌       &:nth-child(3),
214 │ │       &:nth-child(4) {
215 │ │         opacity: 0;
216 │ │       }
    │ └─── nested rule
    ╵
    node_modules\bulma\sass\components\navbar.scss 258:3  @forward
    src\styles\my-bulma.scss 31: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\bulma\sass\components\navbar.scss
259 │     margin-inline-end: 0.375rem;
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules\bulma\sass\utilities\mixins.scss
213 │ ┌       &:nth-child(3),
214 │ │       &:nth-child(4) {
215 │ │         opacity: 0;
216 │ │       }
    │ └─── nested rule
    ╵
    node_modules\bulma\sass\components\navbar.scss 259:3  @forward
    src\styles\my-bulma.scss 31:1                         root stylesheet

[ksoze84]

same here with Bulma 1.01, vite 5.2.0, sass 1.77.2

[webinarium]

I confirm that I'm having the same warnings.

I use Bulma v1.0.1, and (for me) the warnings are caused by this statement of mine:

@use "bulma/sass/components/navbar" with (
    $navbar-breakpoint: initial-variables.$tablet
);

The warnings appear when I updated my Dart Sass from 1.77.6 to 1.77.8. No other changes were made - the same version of Bulma and the same statement were just fine before the update.

For now, I suppressed the warnings by passing quietDeps: true to the SassLoader options (I use Webpack), but would be great to get rid of the warnings in the source.

Thank you!

[MichalSvatos]

Exact same problem with Bulma and Jekyll.

[sank64]

The solution is to correct the navbar.scss at line 254:

.#{iv.$class-prefix}navbar-burger {
  @extend %reset;
  @include mx.burger(2.5rem);
  align-self: center;
  margin-inline-start: auto;
  margin-inline-end: 0.375rem;
}

.#{iv.$class-prefix}navbar-menu {
  display: none;
}

with this code:

.#{iv.$class-prefix}navbar-burger {
  @extend %reset;
  @include mx.burger(2.5rem);

  & {
    align-self: center;
    margin-inline-start: auto;
    margin-inline-end: 0.375rem;
  }
}

I have tested this and it works on my vue app. I am not really skilled at pulling request using github (yep I am a noob xD), so anyone who is, just ping this to @jgthms