Hello, I have learned that the sass libraries used in this project are outdated and have upgraded the dependencies using dart sass.
The way I did this was to use npm install -g sass and then ran sass src/styles/main.scss and then looked at the log as shown below and used CTRL + Shift + H to do a find and replace.
After doing sass src/ a few times in the console I can determine there are no more deprecated sass features present. I will see about upgrading the other dependencies npm advised for the following pull request, hopefully.
P.S
Depreciation log of past errors I detected.
Deprecation Warning on line 365, column 4 of src/assets/sass/libs/_vendor.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
365 │ @elseif $expandValue {
│ ^^^^^^^
╵
Deprecation Warning on line 44, column 5 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
44 │ @elseif (str-slice($query, 0, 2) == '<=') {
│ ^^^^^^^
╵
Deprecation Warning on line 52, column 5 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
52 │ @elseif (str-slice($query, 0, 1) == '>') {
│ ^^^^^^^
╵
Deprecation Warning on line 60, column 5 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
60 │ @elseif (str-slice($query, 0, 1) == '<') {
│ ^^^^^^^
╵
Deprecation Warning on line 68, column 5 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
68 │ @elseif (str-slice($query, 0, 1) == '!') {
│ ^^^^^^^
╵
Deprecation Warning on line 103, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
103 │ @elseif ($op == 'lte') {
│ ^^^^^^^
╵
Deprecation Warning on line 108, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
108 │ @elseif ($op == 'gt') {
│ ^^^^^^^
╵
Deprecation Warning on line 113, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
113 │ @elseif ($op == 'lt') {
│ ^^^^^^^
╵
Deprecation Warning on line 118, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
118 │ @elseif ($op == 'not') {
│ ^^^^^^^
╵
Deprecation Warning on line 138, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
138 │ @elseif ($op == 'lte') {
│ ^^^^^^^
╵
Deprecation Warning on line 143, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
143 │ @elseif ($op == 'gt') {
│ ^^^^^^^
╵
Deprecation Warning on line 148, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
148 │ @elseif ($op == 'lt') {
│ ^^^^^^^
╵
Deprecation Warning on line 153, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
153 │ @elseif ($op == 'not') {
│ ^^^^^^^
╵
Deprecation Warning on line 173, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
173 │ @elseif ($op == 'lte') {
│ ^^^^^^^
╵
Deprecation Warning on line 178, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
178 │ @elseif ($op == 'gt') {
│ ^^^^^^^
╵
Deprecation Warning on line 183, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
183 │ @elseif ($op == 'lt') {
│ ^^^^^^^
╵
Deprecation Warning on line 188, column 10 of src/assets/sass/libs/_breakpoints.scss:
@elseif is deprecated and will not be supported in future Sass versions.
Recommendation: @else if
╷
188 │ @elseif ($op == 'not') {
│ ^^^^^^^
╵
Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won't be able to declare new variables.
Since this assignment is at the root of the stylesheet, the !global flag is
unnecessary and can safely be removed.
╷
7 │ $breakpoints: () !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/sass/libs/_breakpoints.scss 7:2 @import
src/assets/sass/main.scss 5:9 root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(_size(element-margin), 4) or calc(_size(element-margin) / 4)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
124 │ padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/sass/base/_typography.scss 124:13 @import
src/assets/sass/main.scss 46:10 root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(_size(element-margin), 4) or calc(_size(element-margin) / 4)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
124 │ padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/sass/base/_typography.scss 124:43 @import
src/assets/sass/main.scss 46:10 root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(100%, $cols) or calc(100% / $cols)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
13 │ $unit: 100% / $cols;
│ ^^^^^^^^^^^^
╵
src/assets/sass/libs/_html-grid.scss 13:11 html-grid()
src/assets/sass/components/_row.scss 10:3 @import
src/assets/sass/main.scss 50:10 root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(1, 3) or calc(1 / 3)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
35 │ width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
│ ^^^^^
╵
src/assets/sass/components/_form.scss 35:45 @import
src/assets/sass/main.scss 53:10 root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(0.75em, 0.8) or calc(0.75em / 0.8)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
54 │ margin-right: (0.75em / 0.8);
│ ^^^^^^^^^^^^
╵
src/assets/sass/components/_pagination.scss 54:20 @import
src/assets/sass/main.scss 61:10 root stylesheet
Warning: 3 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won't be able to declare new variables.
Since this assignment is at the root of the stylesheet, the !global flag is
unnecessary and can safely be removed.
╷
7 │ $breakpoints: () !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/sass/libs/_breakpoints.scss 7:2 @import
src/assets/sass/noscript.scss 5:9 root stylesheet
Hello, I have learned that the sass libraries used in this project are outdated and have upgraded the dependencies using dart sass.
The way I did this was to use
npm install -g sassand then ransass src/styles/main.scssand then looked at the log as shown below and used CTRL + Shift + H to do a find and replace.After doing
sass src/a few times in the console I can determine there are no more deprecated sass features present. I will see about upgrading the other dependencies npm advised for the following pull request, hopefully.P.S
Depreciation log of past errors I detected.