Topic: Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
waterandwind priority asked 7 months ago
Environment
- name: mdb-vue-ui-kit
- version: 4.1.1
Using in IntelliJ with Vite PWA.
Expected behavior
There should be no warnings.
Actual behavior
There are warnings for deprecation using abs().
styles.scss
$danger: #C5015A;
$success: #3cff88;
@import "mdb-vue-ui-kit/src/scss/index.pro.dark";
@import url('https://fonts.googleapis.com/css2?family=Exo 2:wght@100..900&display=swap');
$my-theme-primary: #aca1ff; // theme primary color, change this value to customize theme
$my-theme-secondary: #f6b4a2; // theme secondary color, change this value to customize theme
$my-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary);
@include mdb-theme($my-theme);
:root {
--mdb-body-font-family: "Exo 2";
}
Resources (screenshots, code snippets etc.)
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\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\vendor\_rfs.scss 57:14 divide()
node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_grid.scss 72:12 row-cols()
node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_grid.scss 102:13 @content
node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_breakpoints.scss 72:5 media-breakpoint-up()
node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\mixins\_grid.scss 89:5 make-grid-columns()
node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\_grid.scss 31:3 @import
node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.free.scss 21:9 @import
node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.pro.scss 2:9 @import
node_modules\mdb-vue-ui-kit\src\scss\index.pro.scss 2:9 @import
node_modules\mdb-vue-ui-kit\src\scss\index.pro.dark.scss 2:9 @import
src\assets\scss\styles.scss 4:9 root stylesheet
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(40%)
To emit a CSS abs() now: abs(#{40%})
More info: https://sass-lang.com/d/abs-percent
╷
63 │ $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\_alert.scss 63:66 @import
node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.free.scss 36:9 @import
node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.pro.scss 2:9 @import
node_modules\mdb-vue-ui-kit\src\scss\index.pro.scss 2:9 @import
node_modules\mdb-vue-ui-kit\src\scss\index.pro.dark.scss 2:9 @import
src\assets\scss\styles.scss 4:9 root stylesheet
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(40%)
To emit a CSS abs() now: abs(#{40%})
More info: https://sass-lang.com/d/abs-percent
╷
192 │ abs($list-group-item-color-scale)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\mdb-vue-ui-kit\src\scss\standard\bootstrap-rtl-fix\_list-group.scss 192:7 @import
node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.free.scss 40:9 @import
node_modules\mdb-vue-ui-kit\src\scss\standard\mdb.pro.scss 2:9 @import
node_modules\mdb-vue-ui-kit\src\scss\index.pro.scss 2:9 @import
node_modules\mdb-vue-ui-kit\src\scss\index.pro.dark.scss 2:9 @import
src\assets\scss\styles.scss 4:9 root stylesheet
Add comment
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 4.1.1
- Device: Desktop PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No