Topic: Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
                  
                  waterandwind
                  priority
                  asked 1 year 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