Contrib.social

Passing percentage units to the global abs() function is deprecated

Open on Drupal.org →
Created on 12 October 2023, 9 months ago
Updated 10 February 2024, 5 months ago

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.

🐛 Bug report
Status

Needs review

Version

3.0

Component

Code

Created by

🇺🇸United States jstoller

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024