SASS deprecation warnings

[pgwillia]

Describe the bug

$ sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
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

   ╷
54 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 54:14             divide()
    node_modules/bootstrap/scss/mixins/_grid.scss 66:15            row-cols()
    node_modules/bootstrap/scss/mixins/_grid-framework.scss 43:13  @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 65:5      media-breakpoint-up()
    node_modules/bootstrap/scss/mixins/_grid-framework.scss 32:5   make-grid-columns()
    node_modules/bootstrap/scss/_grid.scss 72:3                    @import
    bootstrap/scss/bootstrap.scss 16:9                             @import
    app/assets/stylesheets/application.sass.scss 7:9               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/bootstrap/scss/_custom-forms.scss
415│       appearance: none;
   │       ^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules/bootstrap/scss/mixins/_transition.scss
21 │ ┌       @media (prefers-reduced-motion: reduce) {
22 │ │         transition: none;
23 │ │       }
   │ └─── nested rule
   ╵
    node_modules/bootstrap/scss/_custom-forms.scss 415:5  @import
    bootstrap/scss/bootstrap.scss 24:9                    @import
    app/assets/stylesheets/application.sass.scss 7:9      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/bootstrap/scss/_custom-forms.scss
441│       appearance: none;
   │       ^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules/bootstrap/scss/mixins/_transition.scss
21 │ ┌       @media (prefers-reduced-motion: reduce) {
22 │ │         transition: none;
23 │ │       }
   │ └─── nested rule
   ╵
    node_modules/bootstrap/scss/_custom-forms.scss 441:5  @import
    bootstrap/scss/bootstrap.scss 24:9                    @import
    app/assets/stylesheets/application.sass.scss 7:9      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/bootstrap/scss/_custom-forms.scss
470│       appearance: none;
   │       ^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules/bootstrap/scss/mixins/_transition.scss
21 │ ┌       @media (prefers-reduced-motion: reduce) {
22 │ │         transition: none;
23 │ │       }
   │ └─── nested rule
   ╵
    node_modules/bootstrap/scss/_custom-forms.scss 470:5  @import
    bootstrap/scss/bootstrap.scss 24:9                    @import
    app/assets/stylesheets/application.sass.scss 7:9      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

    ╷
167 │ ┌           > .container#{breakpoint-infix($size, $container-max-widths)} {
168 │ │             @extend %container-navbar-expand-#{$breakpoint};
169 │ │           }
    │ └─── nested rule
... │
174 │           flex-flow: row nowrap;
    │           ^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/bootstrap/scss/_navbar.scss 174:9             @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 65:5  media-breakpoint-up()
    node_modules/bootstrap/scss/_navbar.scss 173:7             @import
    bootstrap/scss/bootstrap.scss 26:9                         @import
    app/assets/stylesheets/application.sass.scss 7:9           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

    ╷
167 │ ┌           > .container#{breakpoint-infix($size, $container-max-widths)} {
168 │ │             @extend %container-navbar-expand-#{$breakpoint};
169 │ │           }
    │ └─── nested rule
... │
175 │           justify-content: flex-start;
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/bootstrap/scss/_navbar.scss 175:9             @content
    node_modules/bootstrap/scss/mixins/_breakpoints.scss 65:5  media-breakpoint-up()
    node_modules/bootstrap/scss/_navbar.scss 173:7             @import
    bootstrap/scss/bootstrap.scss 26:9                         @import
    app/assets/stylesheets/application.sass.scss 7:9           root stylesheet

To Reproduce
https://github.com/ualbertalib/jupiter/actions/runs/11349363028/job/31565282695

Expected behavior
Correct deprecations before behaviour change.