fix deprecation warnings related to changes newer dart sass versions
- Dominant language
- PHP
- Stars
- 10
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
```
chazp@win11 MINGW64 /c/OpenSB (dev)
$ /c/OpenSB/tools/compile-scss.sh
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
╷
41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration
╵
scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium_darkmode.scss 74: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
╷
41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration
╵
scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium_beta.scss 100: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
╷
41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration
╵
scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium_qobo.scss 65: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
╷
266 │ ┌ &:hover {
267 │ │ background: #ffffff;
268 │ │ }
│ └─── nested rule
269 │ padding: 4px 0;
│ ^^^^^^^^^^^^^^ declaration
╵
scss\finalium\finalium_beta.scss 269:7 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
┌──> scss\biscuit\biscuit\_page.scss
8 │ margin: 10px auto auto auto;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule
╵
scss\biscuit\biscuit\_page.scss 8:3 @import
scss\biscuit\biscuit\_imports.scss 16:9 @import
scss\biscuit\default.scss 8: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
┌──> scss\biscuit\biscuit\_page.scss
8 │ margin: 10px auto auto auto;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule
╵
scss\biscuit\biscuit\_page.scss 8:3 @import
scss\biscuit\biscuit\_imports.scss 16:9 @import
scss\biscuit\cubicle.scss 8: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
┌──> scss\biscuit\biscuit\_header.scss
77│ height: $header-logo-height;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule
╵
scss\biscuit\biscuit\_header.scss 77:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8: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
┌──> scss\biscuit\biscuit\_header.scss
87│ height: $header-logo-height;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule
╵
scss\biscuit\biscuit\_header.scss 87:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8: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
┌──> scss\biscuit\biscuit\_header.scss
90│ margin-right: 10px;
│ ^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule
╵
scss\biscuit\biscuit\_header.scss 90:3 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8: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
┌──> scss\biscuit\biscuit\_header.scss
182│ display: flex;
│ ^^^^^^^^^^^^^ declaration
╵
┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule
╵
scss\biscuit\biscuit\_header.scss 182:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\default.scss 8: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
╷
25 │ ┌ &:hover, &.selected {
26 │ │ cursor: pointer;
27 │ │ }
│ └─── nested rule
... │
36 │ background: #64b713;
│ ^^^^^^^^^^^^^^^^^^^ declaration
╵
scss\biscuit\biscuit\_header.scss 36:9 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8: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
╷
25 │ ┌ &:hover, &.selected {
26 │ │ cursor: pointer;
27 │ │ }
│ └─── nested rule
... │
37 │ border-left: 1px solid #4e9e00;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
scss\biscuit\biscuit\_header.scss 37:9 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8: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
╷
25 │ ┌ &:hover, &.selected {
26 │ │ cursor: pointer;
27 │ │ }
│ └─── nested rule
... │
38 │ border-right: 1px solid #4e9e00;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
scss\biscuit\biscuit\_header.scss 38:9 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8: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
┌──> scss\biscuit\biscuit\_header.scss
77│ height: $header-logo-height;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> scss\biscuit\biscuit\mixins\_responsiveness.scss
7 │ ┌ @media #{min-width-for($size)} {
8 │ │ @content;
9 │ │ }
│ └─── nested rule
╵
scss\biscuit\biscuit\_header.scss 77:5 @import
scss\biscuit\biscuit\_imports.scss 159:9 @import
scss\biscuit\cubicle.scss 8: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
╷
41 │ ┌ &.sel {
42 │ │ background-color: darken($gray-200, 10.5%);
43 │ │ @include gradient-y($start-color: lighten($gray-200, 10.5%), $end-color: lighten($gray-200, 5.5%));
44 │ │ }
│ └─── nested rule
45 │ border-radius: 5px;
│ ^^^^^^^^^^^^^^^^^^ declaration
╵
scss\finalium\_buttons.scss 45:3 @import
scss\finalium\_imports.scss 17:9 @import
scss\finalium\finalium.scss 351:9 root stylesheet
WARNING: 32 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
WARNING: 35 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
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
┌──> vendor\twbs\bootstrap\scss\_reboot.scss
503 │ font-weight: $legend-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
vendor\twbs\bootstrap\scss\_reboot.scss 503:3 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 16:9 @import
scss\bootstrap\bootstrap.scss 12: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
┌──> vendor\twbs\bootstrap\scss\_reboot.scss
504 │ line-height: inherit;
│ ^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
vendor\twbs\bootstrap\scss\_reboot.scss 504:3 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 16:9 @import
scss\bootstrap\bootstrap.scss 12: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
┌──> vendor\twbs\bootstrap\scss\_type.scss
38 │ font-family: $display-font-family;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
vendor\twbs\bootstrap\scss\_type.scss 38:5 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 17:9 @import
scss\bootstrap\bootstrap.scss 12: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
┌──> vendor\twbs\bootstrap\scss\_type.scss
39 │ font-style: $display-font-style;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
vendor\twbs\bootstrap\scss\_type.scss 39:5 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 17:9 @import
scss\bootstrap\bootstrap.scss 12: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
┌──> vendor\twbs\bootstrap\scss\_type.scss
40 │ font-weight: $display-font-weight;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> vendor\twbs\bootstrap\scss\vendor\_rfs.scss
136 │ ┌ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137 │ │ @content;
138 │ │ }
│ └─── nested rule
╵
vendor\twbs\bootstrap\scss\_type.scss 40:5 @import
vendor\twbs\bootstrap\scss\bootstrap.scss 17:9 @import
scss\bootstrap\bootstrap.scss 12:9 root stylesheet
WARNING: 22 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
chazp@win11 MINGW64 /c/OpenSB (dev)
$
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Run tools/compile-scss.sh and use its reported locations to inspect scss/finalium/_buttons.scss, scss/finalium/finalium_beta.scss, and the biscuit SCSS files, including mixins/_responsiveness.scss. Update the declarations or nested rules causing the reported mixed-declaration warnings, then rerun the script until these deprecation warnings no longer appear.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- sass, scss
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100