Problem/Motivation

Passing a percentage unit to the global abs() is deprecated beginning in Dart Sass 1.65.0. Now when I compile the CSS in my theme it triggers the following notice:

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);
   │              ^^^^^^^^^^^^^^
   ╵
    ../../contrib/bootstrap4/dist/bootstrap/4.6.2/scss/vendor/_rfs.scss 54:14             divide()
    ../../contrib/bootstrap4/dist/bootstrap/4.6.2/scss/mixins/_grid.scss 66:15            row-cols()
    ../../contrib/bootstrap4/dist/bootstrap/4.6.2/scss/mixins/_grid-framework.scss 43:13  @content
    ../../contrib/bootstrap4/dist/bootstrap/4.6.2/scss/mixins/_breakpoints.scss 65:5      media-breakpoint-up()
    ../../contrib/bootstrap4/dist/bootstrap/4.6.2/scss/mixins/_grid-framework.scss 32:5   make-grid-columns()
    ../../contrib/bootstrap4/dist/bootstrap/4.6.2/scss/_grid.scss 72:3                    @import
    ../../contrib/bootstrap4/dist/bootstrap/4.6.2/scss/bootstrap.scss 16:9                @import
    ../../contrib/bootstrap4/scss/style.scss 3:9                                          @import
    scss/base/_index.scss 18:9                                                            @import
    scss/skeptic.scss 8:9                                                                 root stylesheet

Proposed resolution

Borrowing from how Bootstrap 5 addresses this issue, I propose changing the row-cols() mixin, in _grid.scss, from...

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

...to...

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

This produces no changes in the compiled CSS.

CommentFileSizeAuthor
#5 13.patch874 bytesjstoller

Issue fork bootstrap4-3393446

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

jstoller created an issue. See original summary.

jstoller’s picture

Issue summary: View changes

Update proposed solution, so there are no changes to the compiled CSS.

jstoller’s picture

Status: Active » Needs review
jstoller’s picture

StatusFileSize
new874 bytes

Here's merge request !13 as a patch.

jannakha’s picture

It's generally not a best practice to update /dist/ folder as it's coming from Bootstrap 4 distribution.
Framework Bootstrap 4's development has been stopped (all hands on Bootstrap 5 now).

@VladimirAus - what do you think? should /dist/ be updated?

vladimiraus’s picture

Status: Needs review » Needs work

We do compile css along with SASS changes.

vladimiraus’s picture

Status: Needs work » Needs review
vladimiraus’s picture

Status: Needs review » Needs work

Thank you for your contribution. 🧁
See #6 comment.

jannakha’s picture

Status: Needs work » Closed (won't fix)

Since Bootstrap 4 is no longer in active development by TWBS team and keeping Bootstrap 4 in line with latest SASS compilers will take a significant effort (more and more deprecations will be added to sass v1.34+)

The solution is to use old version of Sass compiler:
https://github.com/twbs/bootstrap/issues/34051#issuecomment-845838276

please use:

npx sass@1.32  scss/style.scss css/style.css
npx sass@1.32  scss/ck5style.scss css/ckstyle.css

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.