dart-sass 1.80.0+ throwing a lot of deprecations

[KieranP]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

dart-sass has deprecated a bunch of things that bootstrap currently uses:

• @import has been deprecated in favor of @use
• Global built-in functions such as color
• How CSS values after a & block behave

frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 1 │ @import "mixins/banner";
frontend  |   │         ^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 1:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 7 │ @import "functions";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 7:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 8 │ @import "variables";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 9 │ @import "variables-dark";
frontend  |   │         ^^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 9:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 10 │ @import "maps";
frontend  |    │         ^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 10:9                @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 207 │   @return mix(white, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 207:11             tint-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 79:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 212 │   @return mix(black, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 212:11             shade-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 84:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 342 │ $light-bg-subtle:         mix($gray-100, $white) !default;
frontend  |     │                           ^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_variables.scss 342:27             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                              ^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:30              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                                                   ^^^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:51              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 185 │     "r": red($color),
frontend  |     │          ^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 185:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 186 │     "g": green($color),
frontend  |     │          ^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 186:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: blue() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "blue", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 187 │     "b": blue($color)
frontend  |     │          ^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 187:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │           ^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:11              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │                        ^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:24              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 503 │     font-weight: $legend-font-weight;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 503:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 504 │     line-height: inherit;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 504:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 38  │       font-family: $display-font-family;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 38:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 39  │       font-style: $display-font-style;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 39:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 40  │       font-weight: $display-font-weight;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 40:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Warning: 254 repetitive deprecation warnings omitted.
frontend  | Run in verbose mode to see all warnings.
frontend  |
frontend  | 8:23:08 am [vite] hmr update /stylesheets/application.scss
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 1 │ @import "mixins/banner";
frontend  |   │         ^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 1:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 7 │ @import "functions";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 7:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 8 │ @import "variables";
frontend  |   │         ^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |   ╷
frontend  | 9 │ @import "variables-dark";
frontend  |   │         ^^^^^^^^^^^^^^^^
frontend  |   ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 9:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 10 │ @import "maps";
frontend  |    │         ^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/bootstrap.scss 10:9                @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 207 │   @return mix(white, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 207:11             tint-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 79:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 212 │   @return mix(black, $color, $weight);
frontend  |     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 212:11             shade-color()
frontend  |     ../../../bootstrap/scss/_variables.scss 84:12              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use color.mix instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |     ╷
frontend  | 342 │ $light-bg-subtle:         mix($gray-100, $white) !default;
frontend  |     │                           ^^^^^^^^^^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_variables.scss 342:27             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                              ^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:30              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
frontend  | Use math.unit instead.
frontend  |
frontend  | More info and automated migrator: https://sass-lang.com/d/import
frontend  |
frontend  |    ╷
frontend  | 11 │     @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
frontend  |    │                                                   ^^^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 11:51              -assert-ascending()
frontend  |     ../../../bootstrap/scss/_variables.scss 494:1              @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 185 │     "r": red($color),
frontend  |     │          ^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 185:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 186 │     "g": green($color),
frontend  |     │          ^^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 186:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: blue() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "blue", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |     ╷
frontend  | 187 │     "b": blue($color)
frontend  |     │          ^^^^^^^^^^^^
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 187:10             luminance()
frontend  |     ../../../bootstrap/scss/_functions.scss 174:8              contrast-ratio()
frontend  |     ../../../bootstrap/scss/_functions.scss 159:22             color-contrast()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:42             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: red() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "red", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │           ^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:11              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: green() is deprecated. Suggestion:
frontend  |
frontend  | color.channel($color, "green", $space: rgb)
frontend  |
frontend  | More info: https://sass-lang.com/d/color-functions
frontend  |
frontend  |    ╷
frontend  | 37 │   @return red($value), green($value), blue($value);
frontend  |    │                        ^^^^^^^^^^^^^
frontend  |    ╵
frontend  |     ../../../bootstrap/scss/_functions.scss 37:24              to-rgb()
frontend  |     ../../../bootstrap/scss/_variables.scss 846:31             @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 8:9                 @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 503 │     font-weight: $legend-font-weight;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 503:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_reboot.scss
frontend  | 504 │     line-height: inherit;
frontend  |     │     ^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_reboot.scss 504:3                 @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 16:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 38  │       font-family: $display-font-family;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 38:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 39  │       font-style: $display-font-style;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 39:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Deprecation Warning: Sass's behavior for declarations that appear after nested
frontend  | rules will be changing to match the behavior specified by CSS in an upcoming
frontend  | version. To keep the existing behavior, move the declaration above the nested
frontend  | rule. To opt into the new behavior, wrap the declaration in `& {}`.
frontend  |
frontend  | More info: https://sass-lang.com/d/mixed-decls
frontend  |
frontend  |     ┌──> ../../../bootstrap/scss/_type.scss
frontend  | 40  │       font-weight: $display-font-weight;
frontend  |     │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
frontend  |     ╵
frontend  |     ┌──> ../../../bootstrap/scss/vendor/_rfs.scss
frontend  | 136 │ ┌     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
frontend  | 137 │ │       @content;
frontend  | 138 │ │     }
frontend  |     │ └─── nested rule
frontend  |     ╵
frontend  |     ../../../bootstrap/scss/_type.scss 40:5                    @import
frontend  |     ../../../bootstrap/scss/bootstrap.scss 17:9                @use
frontend  |
frontend  | Warning: 254 repetitive deprecation warnings omitted.
frontend  | Run in verbose mode to see all warnings.
frontend  |

Reduced test cases

Just import bootstrap into project using dart-sass >= 1.80.0

What operating system(s) are you seeing the problem on?

macOS, Linux

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

This was mentioned in this comment while searching for a solution to the deprecations introduced in version 1.79. Dropping Node Sass will be necessary to fix this issue.

In the meantime, a few options for Bootstrap users:

• Pinning the sass dependency
• Silencing the deprecation warnings
• Ignoring the warnings, as the deprecated features remain usable for now