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

[n-rodriguez]

Hi there! I have the same warning with bootstrap 4.6.2.

Edit: I know that BS 4.x is deprecated and maintainance is focused on BS 5.x but I'm wondering if the fix (if any) could be backported on 4.x.

Thank you!

[VictorQueiroz]

Is this project dead?

[rallets]

@VictorQueiroz I'm not involved in this project, and I don't want to speak out for the maintainers, but I don't think so.
As this is a minor issue, it just logs a warning for a sass deprecated function, and it's not a breaking change, I think has a very low priority. You can keep an eye on the related issue, and see there is already some work in progress.

[n-rodriguez]

As this is a minor issue, it just logs a warning for a sass deprecated function, and it's not a breaking change

I agree with you that it's just a warning but still, it's a warning and the warning says :

In the future, this will emit a CSS abs() function to be resolved by the browser.

Since I'm not a CSS expert I don't know / can't measure the impact it will have on the app I'm maintaining : it could break something... or not 😄

That's why i'm asking to maintainers if a fix on BS 4.x could be planned.

Edit: from Sass point of view it's a breaking change https://sass-lang.com/documentation/breaking-changes/

[jdion84]

vite HMR is spamming my terminal with this warning

can we get the PR pushed and released please

[blankse]

@jdion84 You can downgrade the sass dependency in your packages.json to remove the warnings:

    "sass": "~1.64.2",

My PR don't fix all warnings. This topic will take time.

[musaab-abdalla]

Immediate Solution:

1. Open the bootstrap/vendor/_rfd.scss file.
2. At the beginning of the file, insert the following line: @use "sass:math";
3. Locate instances of the abs() function within this file and replace them with math.abs().

[nsmithdev]

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

I applied the temp fix mentioned by @featuriz three weeks ago and pinned the sass package version to 1.16.2 by adding "sass": "~1.64.2", to my package.json. It fixed the problem for my entire team with no manual node_module edits. We will remove that one line when the new bootstrap version is released.

[lazaraslobo]

getting the same warning

rm -rf node_modules
"sass": "~1.64.2"
npm i

[VictorQueiroz]

I don't even think we should be posting about this warning here. It's not about the framework. It's about the new and slow implementation of Sass in Dart. If you're willing to use bad software, that is ultimately up to you. It definitely has nothing to do with this project. Let's close this.

[n-rodriguez]

@VictorQueiroz it's painfully obvious that you don't know how to use your tools

[rallets]

It's very sad to see people complaining about an open source project, where you get everything for free, you have access to the source code, you have documentation, you can participate/contribute with a PR, and so on.
Nope, still someone think you are their slave and work for free and asap. It's a "cultural" problem that I hope it will change soon. It's true the most important skills for a developer are soft skills, and very difficult to find nowadays. 😶
And we are speaking about bootstrap, one of the most used and supported framework in the last 12 years.
I feel the pain of the maintainers. 😔
I understand why many choose to go closed source. Open source will not last long sadly...

[sbaechler]

To add @musaab-abdalla's fix to git (until a new version is released) use patch-package:

Immediate Solution:

1. Open the bootstrap/vendor/_rfd.scss file.
2. At the beginning of the file, insert the following line: @use "sass:math";
3. Locate instances of the abs() function within this file and replace them with math.abs().

4. npx patch-package bootstrap
   

Be aware that this fix does not work under Libsass so the definitive fix for this issue will be something different.

[SheldonWBM]

@rallets I agree with you mostly however, "Open source will not last long" is wrong. Linus Torvald still argues for the "Open Source" concept with coding and the sciences (not necessarily politics and other "grey" areas). We use open-source resources to create and enhance private products and services. When code is no longer maintained, if there is no better alternative, being open-source, anyone with the qualified skills can pick up the project and continue it. https://www.youtube.com/watch?v=7XTHdcmjenI

[runphp]

I also encountered this issue. It's just a warning and I didn't notice any actual impact. But I'm still waiting for it to be fixed officially.

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);
   │              ^^^^^^^^^^^^^^
   ╵
    D:\blog.runphp.net\node_modules\bootstrap\scss\vendor\_rfs.scss 57:14         divide()
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_grid.scss 59:12        row-cols()
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_grid.scss 85:13        @content
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5  media-breakpoint-up()
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_grid.scss 72:5         make-grid-columns()
    bootstrap\scss\_grid.scss 38:3                                                @import
    _style.scss 47:9                                                              @import
    D:\blog.runphp.net\css\main.scss 2:9                                          root stylesheet
                    ...done in 29.6915673 seconds.

      Regenerating: 1 file(s) changed at 2023-09-05 11:14:29
                    _sass/_style.scss
       Jekyll Feed: Generating feed for posts

[lusacramento]

runphp
I also encountered this issue. It's just a warning and I didn't notice any actual impact. But I'm still waiting for it to be fixed officially.

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);
   │              ^^^^^^^^^^^^^^
   ╵
    D:\blog.runphp.net\node_modules\bootstrap\scss\vendor\_rfs.scss 57:14         divide()
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_grid.scss 59:12        row-cols()
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_grid.scss 85:13        @content
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5  media-breakpoint-up()
    D:\blog.runphp.net\node_modules\bootstrap\scss\mixins\_grid.scss 72:5         make-grid-columns()
    bootstrap\scss\_grid.scss 38:3                                                @import
    _style.scss 47:9                                                              @import
    D:\blog.runphp.net\css\main.scss 2:9                                          root stylesheet
                    ...done in 29.6915673 seconds.

      Regenerating: 1 file(s) changed at 2023-09-05 11:14:29
                    _sass/_style.scss
       Jekyll Feed: Generating feed for posts

I using Nuxt v3.7.1 with bootstrap 5.3.1 and I fixed this error following the AvigdorB's tips:

1 - In node_modules/bootstrap/scss/vendor/_rfs.scss file, add to top:

@use 'sass:math';

2 - In line error, replace:

$dividend: abs($dividend);

to

$dividend: math.abs($dividend);

[hashimaziz1]

To add @musaab-abdalla's fix to git (until a new version is released) use patch-package:

Immediate Solution:

1. Open the bootstrap/vendor/_rfd.scss file.
2. At the beginning of the file, insert the following line: @use "sass:math";
3. Locate instances of the abs() function within this file and replace them with math.abs().

4. ```
   npx patch-package bootstrap
   ```

Be aware that this fix does not work under Libsass so the definitive fix for this issue will be something different.

The file is actually _rfs.scss. Also, what's the benefit of using patch-package here? Won't it prevent that file from being updated when the official fix does roll around?

[SheldonWBM]

@hashimaziz1 The fixed version of Bootstrap is 5.3.2 which is why this PR was closed.
After bumping Bootstrap to 5.3.2, if you still have the error, create a new PR?

"Passing a percentage unit to the global abs() is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the divide() function. The divide() function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won't be an issue as we plan to drop support for node-sass." https://github.com/twbs/bootstrap/releases/tag/v5.3.2

[hashimaziz1]

@hashimaziz1 The fixed version of Bootstrap is 5.3.2 which is why this PR was closed. After bumping Bootstrap to 5.3.2, if you still have the error, create a new PR?

"Passing a percentage unit to the global abs() is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the divide() function. The divide() function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won't be an issue as we plan to drop support for node-sass." https://github.com/twbs/bootstrap/releases/tag/v5.3.2

I'm currently on 5.2.3, and it's seeming like enough things have been added to 5.3 to make it a risk updating the codebase to it.

[MohammedSalama]

Hey there , i have the same problem

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

   ╷
54 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules\bootstrap\scss\vendor\_rfs.scss 54:14             divide()

● Mix █████████████████████████ emitting (95%)
 emit

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

   ╷
54 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules\bootstrap\scss\vendor\_rfs.scss 54:14             divide()

× Mix
  Compiled with some errors in 5.71s

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

   ╷
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loade
rs
> <template>
|     <div class="container">
|         <div class="row justify-content-center">

webpack compiled with 1 error

[Eldio-Neto]

if u are with the same error just follow what the user musaab-abdalla says.

[FDiskas]

This can be automated

1. npm i -D patch-package
2. npx -yes sass-migrator division node_modules/bootstrap/scss/**/*.scss
3. npx -yes patch-package bootstrap
4. npm pkg set scripts.postinstall="patch-package"

What it does

1. This will automatically change and update all deprecations more info
2. This command will create a diff - what was changed
3. This script will apply that diff every time installing/updating node_modules

Yarn v1 users more info

1. yarn add -D patch-package postinstall-postinstall