Sass deprecation warning: Using `/` for division is deprecated

[btakita]

dart-sass has deprecated / in favor of math.div. Compiling https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss now results with many sass warnings.

368 │ $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
    │                                           ^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss 368:43  @import

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

Recommendation: math.div($grid-gutter-width, 2)

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

[m-nathani]

maybe this could help with sass-migrator https://github.com/sass/migrator..

install this globally or use npx to run it

npx sass-migrator division **/*.scss

[patrick-hurley]

Using calc() doesn't show a deprecation warning.

$foo: 2

.bar {
  width: calc(100%/$foo)
}

[yktoo]

FYI Bootstrap 4.6.1 is out, but the issue is still there.

[darrinmn9]

@yktoo repro with the sass warning logs similar to the original issue would be helpful. Also, make sure the warning isn't originating other dependencies you may be using (or your own sass files).

After updating to v4.6.1, these deprecation warnings no longer appear for me.

[yktoo]

@darrinmn9 Indeed, it was my own stylesheet that caused the warnings, after I replaced division with multiplication all warnings were gone.

[rob-mathieu]

Adding the ~ worked for me

"sass": "~1.26.11"

[najathi]

It works for me npm i sass@^1.32.11

[RamakantSonkhedkar]

[11:53:25] Starting 'build:compile-css'... Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

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

╷

298 │ $headings-margin-bottom: $spacer / 2 !default; │ ^^^^^^^^^^^ ╵ build_css\clay\bootstrap_variables.scss 298:31 @import build_css\clay\bootstrap\bootstrap.scss 9:9 @import build_css\clay\base.scss 7:9 @import build_css\clay.scss 1: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($input-padding-y, 2) or calc($input-padding-y / 2)

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

╷

493 │ $input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default; │ ^^^^^^^^^^^^^^^^^^^^ ╵ build_css\clay\bootstrap_variables.scss 493:80 @import build_css\clay\bootstrap\bootstrap.scss 9:9 @import build_css\clay\base.scss 7:9 @import build_css\clay.scss 1: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($custom-control-indicator-size, 2) or calc($custom-control-indicator-size / 2)

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

╷

560 │ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ build_css\clay\bootstrap_variables.scss 560:49 @import build_css\clay\bootstrap\bootstrap.scss 9:9 @import build_css\clay\base.scss 7:9 @import build_css\clay.scss 1: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($spacer, 2) or calc($spacer / 2)

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

╷

706 │ $nav-divider-margin-y: $spacer / 2 !default; │ ^^^^^^^^^^^ ╵ build_css\clay\bootstrap_variables.scss 706:37 @import build_css\clay\bootstrap\bootstrap.scss 9:9 @import build_css\clay\base.scss 7:9 @import build_css\clay.scss 1: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($spacer, 2) or calc($spacer / 2)

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

╷

711 │ $navbar-padding-y: $spacer / 2 !default; │ ^^^^^^^^^^^ ╵ build_css\clay\bootstrap_variables.scss 711:37 @import build_css\clay\bootstrap\bootstrap.scss 9:9 @import build_css\clay\base.scss 7:9 @import build_css\clay.scss 1:9 root stylesheet

[11:53:29] 'build:compile-css' errored after 3.58 s [11:53:29] Error in plugin "sass" Message: build_css\compat\components_dropdowns.scss Error: compound selectors may no longer be extended. Consider @extend .dropdown-item, .disabled instead. See http://bit.ly/ExtendCompound for details.

╷ 29 │ @extend .dropdown-item.disabled; │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ build_css\compat\components_dropdowns.scss 29:11 root stylesheet Details: formatted: Error: compound selectors may no longer be extended. Consider @extend .dropdown-item, .disabled instead. See http://bit.ly/ExtendCompound for details.

╷ 29 │ @extend .dropdown-item.disabled; │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ build_css\compat\components_dropdowns.scss 29:11 root stylesheet line: 29 column: 11 file: D:\Git_Repo\Erasmith_Repo\Liferay-Theme-Workspace\themes\erasmith-theme\build_css\compat\components_dropdowns.scss status: 1 messageFormatted: build_css\compat\components_dropdowns.scss Error: compound selectors may no longer be extended. Consider @extend .dropdown-item, .disabled instead. See http://bit.ly/ExtendCompound for details.

╷ 29 │ @extend .dropdown-item.disabled; │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ build_css\compat\components_dropdowns.scss 29:11 root stylesheet messageOriginal: compound selectors may no longer be extended. Consider @extend .dropdown-item, .disabled instead. See http://bit.ly/ExtendCompound for details.

╷ 29 │ @extend .dropdown-item.disabled; │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ build_css\compat\components_dropdowns.scss 29:11 root stylesheet relativePath: build_css\compat\components_dropdowns.scss domainEmitter: [object Object] domainThrown: false

[11:53:29] 'build' errored after 9.13 s

[lcgaravito]

UPDATE: After fixing the warnings in my own code, as if I were using bootstrap v5 with sass, I was checking that the latest version of sass that bootstrap uses so far is "1.71.0". So I decided not to use the latest version of sass but to switch to the same version of bootstrap, and all bootstrap related warnings disappeared:

npm i sass@1.71.0