Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sass deprecation warnings about global built-in functions being deprecated, division outside of calc() #5074

Closed
JasonWeill opened this issue Jan 1, 2025 · 1 comment
Closed

Sass deprecation warnings about global built-in functions being deprecated, division outside of calc() #5074

JasonWeill opened this issue Jan 1, 2025 · 1 comment

Comments

@JasonWeill
Copy link

Theme version and system environment

  • Minimal Mistakes version: 4.26.2
  • Ruby gem or remote theme version: gem 3.5.23
  • Jekyll version: 4.3.4
  • Git repository URL: N/A, happens in test mode on this repo
  • URL to the page with the problem: N/A
  • Operating system: macOS Sonoma 14.7.1
  • Browser version: N/A, happens in terminal

What happened?

When I run jekyll build with the Minimal Mistakes theme in use, there are numerous deprecation warnings concerning the use of built-in functions and the use of / for division outside of calc(). The site still builds, but the SCSS file may be incompatible with future versions of Dart Sass.

See also #5026 about @import rules and #4722 about / for division.

Error summaries:

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(9, 16)
More detailed output ``` Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0. Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import

╷
59 │ $dark-gray: mix(#000, $gray, 50%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_variables.scss 59:13 @import
minimal-mistakes.scss 5:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import

╷
60 │ $darker-gray: mix(#000, $gray, 60%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_variables.scss 60:15 @import
minimal-mistakes.scss 5:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import

╷
61 │ $light-gray: mix(#fff, $gray, 50%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_variables.scss 61:14 @import
minimal-mistakes.scss 5:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import

╷
62 │ $lighter-gray: mix(#fff, $gray, 90%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_variables.scss 62:16 @import
minimal-mistakes.scss 5:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.mix instead.

More info and automated migrator: https://sass-lang.com/d/import

╷
68 │ $muted-text-color: mix(#fff, $text-color, 20%) !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_variables.scss 68:20 @import
minimal-mistakes.scss 5:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(9, 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷
31 │ $mfp-iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
│ ^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/magnific-popup/_settings.scss 31:39 @import
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/magnific-popup/_magnific-popup.scss 3:9 @import
minimal-mistakes.scss 10:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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($value, 16px) or calc($value / 16px)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷
28 │ @return $value / 16px * 1em;
│ ^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss 28:13 base-conversion()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss 20:13 breakpoint-to-base-em()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/parsers/single/_default.scss 8:29 breakpoint-parse-default()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/parsers/_single.scss 22:14 breakpoint-parse-single()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss 153:18 breakpoint-parse()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss 48:22 breakpoint()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss 46:16 breakpoint()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss 13:3 @import
minimal-mistakes.scss 15:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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

┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss
25 │ -webkit-text-size-adjust: 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss
65 │ ┌ @media #{$query-string} {
66 │ │ @content;
67 │ │ }
│ └─── nested rule
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss 25:3 @import
minimal-mistakes.scss 15:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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

┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss
25 │ -webkit-text-size-adjust: 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss
65 │ ┌ @media #{$query-string} {
66 │ │ @content;
67 │ │ }
│ └─── nested rule
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss 25:3 @import
minimal-mistakes.scss 15:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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

┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss
25 │ -webkit-text-size-adjust: 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss
65 │ ┌ @media #{$query-string} {
66 │ │ @content;
67 │ │ }
│ └─── nested rule
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss 25:3 @import
minimal-mistakes.scss 15:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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

┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss
26 │ -ms-text-size-adjust: 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss
65 │ ┌ @media #{$query-string} {
66 │ │ @content;
67 │ │ }
│ └─── nested rule
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss 26:3 @import
minimal-mistakes.scss 15:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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

┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss
26 │ -ms-text-size-adjust: 100%;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> ../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss
65 │ ┌ @media #{$query-string} {
66 │ │ @content;
67 │ │ }
│ └─── nested rule
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_reset.scss 26:3 @import
minimal-mistakes.scss 15:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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(5px, 2) or calc(5px / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷
28 │ margin-bottom: (5px / 2);
│ ^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_forms.scss 28:21 @import
minimal-mistakes.scss 17:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: red() is deprecated. Suggestion:

color.channel($color, "red", $space: rgb)

More info: https://sass-lang.com/d/color-functions

╷
64 │ $red: red($color);
│ ^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 64:9 yiq-is-light()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 81:14 yiq-contrast-color()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 91:10 yiq-contrasted()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_buttons.scss 46:7 @import
minimal-mistakes.scss 22:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

More info: https://sass-lang.com/d/color-functions

╷
65 │ $green: green($color);
│ ^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 65:11 yiq-is-light()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 81:14 yiq-contrast-color()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 91:10 yiq-contrasted()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_buttons.scss 46:7 @import
minimal-mistakes.scss 22:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet
Deprecation Warning: blue() is deprecated. Suggestion:

color.channel($color, "blue", $space: rgb)

More info: https://sass-lang.com/d/color-functions

╷
66 │ $blue: blue($color);
│ ^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 66:10 yiq-is-light()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 81:14 yiq-contrast-color()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 91:10 yiq-contrasted()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_buttons.scss 46:7 @import
minimal-mistakes.scss 22:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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(($red * 299) + ($green * 587) + ($blue * 114), 1000) or calc((($red * 299) + ($green * 587) + ($blue * 114)) / 1000)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷
68 │ $yiq: (($red299)+($green587)+($blue*114))/1000;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 68:9 yiq-is-light()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 81:14 yiq-contrast-color()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_mixins.scss 91:10 yiq-contrasted()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_buttons.scss 46:7 @import
minimal-mistakes.scss 22:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4: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($span-width, $container) or calc($span-width / $container)

More info and automated migrator: https://sass-lang.com/d/slash-div

╷
93 │ @return percentage($span-width / $container);
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss 93:24 su-span()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss 190:11 su-call()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/susy/susy/_api.scss 146:13 susy-span()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss 19:11 span()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_utilities.scss 185:24 @content
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss 66:7 breakpoint()
../../../../minimal-mistakes-jekyll-4.26.2/_sass/minimal-mistakes/_utilities.scss 184:3 @import
minimal-mistakes.scss 31:9 @import
/Users/jweill/jekyll-mm/assets/css/main.scss 4:9 root stylesheet

</details>

### Expected behavior

With the default theme, no Sass warnings should be displayed when I build the site.

### Steps to reproduce the behavior

Set up a new site using Minimal Mistakes; build the site.

### Other

_No response_
@JasonWeill
Copy link
Author

Seems to be a duplicate of #4303 and #4054; sorry about the noise, happy new year 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@JasonWeill