diff --git a/packages/theme-chalk/src/badge.scss b/packages/theme-chalk/src/badge.scss
index 4776e6779..55e93f097 100644
--- a/packages/theme-chalk/src/badge.scss
+++ b/packages/theme-chalk/src/badge.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -22,7 +23,7 @@
     @include when(fixed) {
       position: absolute;
       top: 0;
-      right: #{1 + $--badge-size / 2};
+      right: #{1 + math.div($--badge-size, 2)};
       transform: translateY(-50%) translateX(100%);
 
       @include when(dot) {
diff --git a/packages/theme-chalk/src/carousel.scss b/packages/theme-chalk/src/carousel.scss
index cfca9626d..be78405f8 100644
--- a/packages/theme-chalk/src/carousel.scss
+++ b/packages/theme-chalk/src/carousel.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -122,7 +123,7 @@
       padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
       .el-carousel__button {
         width: $--carousel-indicator-height;
-        height: #{$--carousel-indicator-width / 2};
+        height: #{math.div($--carousel-indicator-width, 2)};
       }
     }
 
diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss
index c2a3387d5..8877b7d62 100644
--- a/packages/theme-chalk/src/col.scss
+++ b/packages/theme-chalk/src/col.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "./common/var.scss";
 @import "./mixins/mixins.scss";
 
@@ -12,21 +13,21 @@
 
 @for $i from 0 through 24 {
   .el-col-#{$i} {
-    width: (1 / 24 * $i * 100) * 1%;
+    width: (math.div(1, 24) * $i * 100) * 1%;
   }
 
   .el-col-offset-#{$i} {
-    margin-left: (1 / 24 * $i * 100) * 1%;
+    margin-left: (math.div(1, 24) * $i * 100) * 1%;
   }
 
   .el-col-pull-#{$i} {
     position: relative;
-    right: (1 / 24 * $i * 100) * 1%;
+    right: (math.div(1, 24) * $i * 100) * 1%;
   }
 
   .el-col-push-#{$i} {
     position: relative;
-    left: (1 / 24 * $i * 100) * 1%;
+    left: (math.div(1, 24) * $i * 100) * 1%;
   }
 }
 
@@ -36,21 +37,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-xs-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-xs-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-xs-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-xs-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1, 24) * $i * 100) * 1%;
     }
   }
 }
@@ -61,21 +62,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-sm-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-sm-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-sm-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-sm-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1, 24) * $i * 100) * 1%;
     }
   }
 }
@@ -86,21 +87,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-md-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-md-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-md-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-md-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1, 24) * $i * 100) * 1%;
     }
   }
 }
@@ -111,21 +112,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-lg-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-lg-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-lg-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-lg-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1, 24) * $i * 100) * 1%;
     }
   }
 }
@@ -136,21 +137,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-xl-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-xl-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-xl-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1, 24) * $i * 100) * 1%;
     }
 
     .el-col-xl-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1, 24) * $i * 100) * 1%;
     }
   }
 }
\ No newline at end of file
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 142838c05..12fd01474 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1,5 +1,5 @@
 /* Element Chalk Variables */
-
+@use "sass:math";
 // Special comment for theme configurator
 // type|skipAutoTranslation|Category|Order
 // skipAutoTranslation 1
@@ -486,7 +486,7 @@ $--cascader-tag-background: #f0f2f5;
 
 /* Group
 -------------------------- */
-$--group-option-flex: 0 0 (1/5) * 100% !default;
+$--group-option-flex: 0 0 math.div(1, 5) * 100% !default;
 $--group-option-offset-bottom: 12px !default;
 $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
 $--group-title-color: $--color-black !default;
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index 4e5109cb8..4b99c9ecb 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 @import "input";
@@ -137,7 +138,7 @@
 
     @include e((increase, decrease)) {
       height: auto;
-      line-height: #{($--input-height - 2) / 2};
+      line-height: #{math.div($--input-height - 2, 2)};
 
       [class*=el-icon] {
         transform: scale(.8);
@@ -161,19 +162,19 @@
 
     &[class*=medium] {
       [class*=increase], [class*=decrease] {
-        line-height: #{($--input-medium-height - 2) / 2};
+        line-height: #{math.div($--input-medium-height - 2, 2)};
       }
     }
 
     &[class*=small] {
       [class*=increase], [class*=decrease] {
-        line-height: #{($--input-small-height - 2) / 2};
+        line-height: #{math.div($--input-small-height - 2, 2)};
       }
     }
 
     &[class*=mini] {
       [class*=increase], [class*=decrease] {
-        line-height: #{($--input-mini-height - 2) / 2};
+        line-height: #{math.div($--input-mini-height - 2, 2)};
       }
     }
   }
diff --git a/packages/theme-chalk/src/loading.scss b/packages/theme-chalk/src/loading.scss
index d63e5125b..40835dce7 100644
--- a/packages/theme-chalk/src/loading.scss
+++ b/packages/theme-chalk/src/loading.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -26,7 +27,7 @@
     position: fixed;
 
     .el-loading-spinner {
-      margin-top: #{- $--loading-fullscreen-spinner-size / 2};
+      margin-top: #{math.div(-$--loading-fullscreen-spinner-size, 2)};
 
       .circular {
         height: $--loading-fullscreen-spinner-size;
@@ -38,7 +39,7 @@
 
 @include b(loading-spinner) {
   top: 50%;
-  margin-top: #{- $--loading-spinner-size / 2};
+  margin-top: #{math.div(-$--loading-spinner-size, 2)};
   width: 100%;
   text-align: center;
   position: absolute;
diff --git a/packages/theme-chalk/src/popper.scss b/packages/theme-chalk/src/popper.scss
index 2104f599b..d9e78cb9a 100644
--- a/packages/theme-chalk/src/popper.scss
+++ b/packages/theme-chalk/src/popper.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -29,7 +30,7 @@
   &[x-placement^="top"] .popper__arrow {
     bottom: -$--popover-arrow-size;
     left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
+    margin-right: #{math.div($--tooltip-arrow-size, 2)};
     border-top-color: $--popover-border-color;
     border-bottom-width: 0;
 
@@ -48,7 +49,7 @@
   &[x-placement^="bottom"] .popper__arrow {
     top: -$--popover-arrow-size;
     left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
+    margin-right: #{math.div($--tooltip-arrow-size, 2)};
     border-top-width: 0;
     border-bottom-color: $--popover-border-color;
 
@@ -67,7 +68,7 @@
   &[x-placement^="right"] .popper__arrow {
     top: 50%;
     left: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
+    margin-bottom: #{math.div($--tooltip-arrow-size, 2)};
     border-right-color: $--popover-border-color;
     border-left-width: 0;
 
@@ -86,7 +87,7 @@
   &[x-placement^="left"] .popper__arrow {
     top: 50%;
     right: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
+    margin-bottom: #{math.div($--tooltip-arrow-size, 2)};
     border-right-width: 0;
     border-left-color: $--popover-border-color;
 
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index fea7d7bad..934ecda13 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "mixins/utils";
 @import "common/var";
@@ -138,7 +139,7 @@
       font-size: 12px;
       display: inline-block;
       box-sizing: border-box;
-      border-radius: #{$--transfer-filter-height / 2};
+      border-radius: #{math.div($--transfer-filter-height, 2)};
       padding-right: 10px;
       padding-left: 30px;
     }