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

[Acmion]

Same issue.

Especially annoying since you can not "mute" sass warnings. This is a problem with Sass and not Bootstrap, but still affects the user experience.

[XhmikosR]

@ffoodd I just hit this in the npm starter project with sass 1.33.0. Now, it is a warning only, but it's annoying because it's repeated many times. My understanding is that the proposed methods don't work with node-sass which is OK for v5.0.0, but for v4 we need to think about it... I was planning to switch to sass in v4 too but perhaps we should do it in a minor version bump.

PS. I run dependabot so that we get the updated PR and see the warnings.

EDIT: https://github.com/twbs/bootstrap/pull/34057/checks?check_run_id=2636494233#step:6:12

[Onefivefournine]

Hope that the team will fix it soon! I am now unable to start dev build because of huge amount of warnings.

Guys from sass refuse to add any silencer for warnings, because they think that warnings are critical, and you should never silence them, even if there are 100k warning lines in your dev build.
sass/libsass#2822 (comment)

UPDATE: Solved by manually downgrading sass to 1.32.*

[vbarden]

UPDATE: Solved by manually downgrading sass to 1.32.*

Can confirm downgrade works.

Thanks @Onefivefournine

[XhmikosR]

Please everyone stop spamming the issue. We will find a solution for v5. You should bug though the Sass devs to allow to hide these warnings. IMHO it's pretty bad right now.

[apolopena]

See sass/dart-sass#1319

[vinorodrigues]

sass/dart-sass has released v1.34.0 that adds a --quiet-deps flag.
Amend this to package.json, line #26 under "css-compile"

• --quiet-deps still has warnings, but not so many (recommended)
• --quiet gets rid of all the warning, but may not be a good idea

[bram-pkg]

@exeptionerror has been spamming the same link already 5 times or something.

[mmarton]

"solution"... by fixing sass compiler to an older version...

a solution would be something like a polyfilling math.div() for node-sass and replaceing it everywhere in the code

[ffoodd]

Polyfilling isn't an option IMHO, this is simply not compatible.
The best way I can think off for now is to add a new dedicated function for div() —just like we already have add() and subtract()— and ensure every division uses it in our core. Then anyone willing to use latest Dart Sass could just change this function to use math.div. We may even add this variant in our core, without including it in our default build.

AFAIK there's no way to either check for @use support nor switch code depending on compiler, so the best we'll be able to do is to facilitate using one or the other on dev side.

Any thoughts or ideas are welcome, obviously!

[ngekoding]

Hope that the team will fix it soon! I am now unable to start dev build because of huge amount of warnings.

Guys from sass refuse to add any silencer for warnings, because they think that warnings are critical, and you should never silence them, even if there are 100k warning lines in your dev build.
sass/libsass#2822 (comment)

UPDATE: Solved by manually downgrading sass to 1.32.*

Thanks, solved for Element Plus also.

[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