SASS Deprecation Warning

[stijns96]

Check that this is really a bug

• I confirm

Reproduction link

/

Bug description

I'm using SCSS in my projects and use SASS to compile it. However, they now giving me this nesting warnings. More info here.

The warnings only appear with sass v1.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

   ╷
81 │ ┌   &:after {
82 │ │     content: 'next';
83 │ │   }
   │ └─── nested rule
84 │     right: var(--swiper-navigation-sides-offset, 10px);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
    ~swiper/modules/navigation.scss 84:3                @use
    src/assets/scss/modules/swiper/navigation.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

    ╷
81  │ ┌   &:after {
82  │ │     content: 'next';
83  │ │   }
    │ └─── nested rule
... │
85  │     left: auto;
    │     ^^^^^^^^^^ declaration
    ╵
    ~swiper/modules/navigation.scss 85:3                @use
    src/assets/scss/modules/swiper/navigation.scss 1:1  root stylesheet

Expected Behavior

No warnings

Actual Behavior

SASS warnings

Swiper version

11.1.4

Platform/Target and Browser Versions

macOS

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[S1ipKn0T]

Hi, same here! when we updated to the new sass version this error will happen!

[stijns96]

Hi @guillem-gelabert & @nolimits4web,

I see that for now only the navigation.scss has been updated.

Please make sure to also check all other scss files. This one was the one that popped up for me in this case, but it could be that other scss files has the same issue

[guillem-gelabert]

I run find . -name '*.scss' -exec sh -c 'npx sass --no-source-map --verbose {} {}.css' \; and those are the only two lines that came up.

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

   ╷
81 │ ┌   &:after {
82 │ │     content: 'next';
83 │ │   }
   │ └─── nested rule
84 │     right: var(--swiper-navigation-sides-offset, 10px);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
    dist/modules/navigation.scss 84:3  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

    ╷
81  │ ┌   &:after {
82  │ │     content: 'next';
83  │ │   }
    │ └─── nested rule
... │
85  │     left: auto;
    │     ^^^^^^^^^^ declaration
    ╵
    dist/modules/navigation.scss 85:3  root stylesheet