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.
Issue fork bootstrap4-3393446
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
Comment #2
jstollerUpdate proposed solution, so there are no changes to the compiled CSS.
Comment #4
jstollerComment #5
jstollerHere's merge request !13 as a patch.
Comment #6
jannakha commentedIt'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?
Comment #7
vladimirausWe do compile css along with SASS changes.
Comment #8
vladimirausComment #9
vladimirausThank you for your contribution. 🧁
See #6 comment.
Comment #10
jannakha commentedSince 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: