Topic: Deprecation Warning: Passing percentage units to the global abs() function is deprecated.

waterandwind priority asked 3 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

Bartosz Cylwik staff answered 3 months ago


Hi! Thanks for letting us know. I'm adding this to our list for the future releases.



Please insert min. 20 characters.

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