dart-sass deprecation warning: Passing percentage units to the global abs() function is deprecated.

[rallets]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

While using the latest bootstrap with dart-sass and including bootstrap via scss, the latest dart-sass is warning about a deprecation:

DEPRECATION WARNING: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

the stacktrace they show is:

node_modules\bootstrap\scss\mixins\_grid.scss 59:12        row-cols()
node_modules\bootstrap\scss\mixins\_grid.scss 85:13        @content
node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5  media-breakpoint-up()
node_modules\bootstrap\scss\mixins\_grid.scss 72:5         make-grid-columns()
node_modules\bootstrap\scss\_grid.scss 38:3                @import
node_modules\bootstrap\scss\bootstrap.scss 20:9            @import

I hope this helps. Tks for your work.

Reduced test cases

@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/_variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

5.3.1

[Dreanad]

mixins_grid.scss
the mixin row-cols need to be :

@mixin row-cols($count) {
  > * {
    flex: 0 0 auto;
    width: divide(100, $count);
  }
}

the divide function need an integer instead of a percentage

[blankse]

@rallets @Dreanad I created a PR #39030

[featuriz]

From: https://sass-lang.com/documentation/breaking-changes/
Passing a percentage unit to the global abs() is deprecated beginning in Dart Sass 1.65.0.
Temporary solution is to stay in v1.64.2

[AvigdorB]

bootstrap.scss

ADD AT THE TOP
@use 'sass:math'

bootstrap_alert.scss
line 65
math.abs($alert-color-scale)

bootstrap_list-group.scss
line 187
math.abs($list-group-item-color-scale)

bootstrap\mixins_grid.scss
line 59
width: math.div(100%, $count);

[vince7488]

I will second this:

LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/components/Header/Header.scss
<w> Deprecation Passing percentage units to the global abs() function is deprecated.
<w> In the future, this will emit a CSS abs() function to be resolved by the browser.
<w> To preserve current behavior: math.abs(100%)
<w> To emit a CSS abs() now: abs(#{100%})
<w> More info: https://sass-lang.com/d/abs-percent
<w>
<w> src/components/Header/Header.scss 1:1                      divide()
<w> node_modules/bootstrap/scss/mixins/_grid.scss 59:12        row-cols()
<w> node_modules/bootstrap/scss/mixins/_grid.scss 85:13        @content
<w> node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
<w> node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
<w> node_modules/bootstrap/scss/_grid.scss 38:3                @import
<w> src/custom.scss 58:9                                       @import
<w> src/App.scss 2:9                                           @import
<w> src/components/Header/Header.scss 1:9                      root stylesheet
<w>

LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss
<w> Deprecation Passing percentage units to the global abs() function is deprecated.
<w> In the future, this will emit a CSS abs() function to be resolved by the browser.
<w> To preserve current behavior: math.abs(100%)
<w> To emit a CSS abs() now: abs(#{100%})
<w> More info: https://sass-lang.com/d/abs-percent
<w>
<w> src/App.scss 1:1                                           divide()
<w> node_modules/bootstrap/scss/mixins/_grid.scss 59:12        row-cols()
<w> node_modules/bootstrap/scss/mixins/_grid.scss 85:13        @content
<w> node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
<w> node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
<w> node_modules/bootstrap/scss/_grid.scss 38:3                @import
<w> src/custom.scss 58:9                                       @import
<w> src/App.scss 2:9                                           root stylesheet
<w>

Could you have a fix ASAP, please?

Deprecation warning issued by SASS: https://sass-lang.com/d/abs-percent

Motivation and context

I just don't want LOGs and warnings like these when running yarn start.

[junaidfarooqui]

[8:09:00 PM] Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

╷
57 │ $dividend: abs($dividend);
│ ^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/vendor/_rfs.scss 57:14 divide()
node_modules/bootstrap/scss/mixins/_grid.scss 59:12 row-cols()
node_modules/bootstrap/scss/mixins/_grid.scss 85:13 @content
node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5 media-breakpoint-up()
node_modules/bootstrap/scss/mixins/_grid.scss 72:5 make-grid-columns()
node_modules/bootstrap/scss/_grid.scss 38:3 @import
node_modules/bootstrap/scss/bootstrap.scss 20:9

NPM: "bootstrap": "^5.3.1",

Seems like problem is not solve fully, please fix this as well. 

[payalord]

$dividend: abs($dividend);

NPM: "bootstrap": "^5.3.1",

Seems like problem is not solve fully, please fix this as well. 

I have the same problem with bootstrap 5.3.1 in _rfs.scss, I hope it will be fixed fast. Proposed solutions:

math.abs(100%)
or
abs(#{100%})

[sezginriggs]

getting the same warning