diff --git a/components/accordion/style/index.less b/components/accordion/style/index.less
index 2322b16358..4ae3c5a759 100644
--- a/components/accordion/style/index.less
+++ b/components/accordion/style/index.less
@@ -38,12 +38,12 @@
         background-size: contain;
         background-repeat: no-repeat;
         background-position: 50% 50%;
-        .transform(rotate(90deg));
+        transform: rotate(90deg);
       }
 
       &[aria-expanded~="true"] {
         i {
-          .transform(rotate(270deg));
+          transform: rotate(270deg);
         }
       }
     }
diff --git a/components/card/style/index.less b/components/card/style/index.less
index 98bd8bfaad..a48e3b29e3 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -9,8 +9,7 @@
   min-height: 1.92rem;
   position: relative;
   padding-bottom: @v-spacing-sm;
-  .display-box();
-
+  display: flex;
   flex-direction: column;
   background-color: @fill-base;
 
@@ -21,8 +20,7 @@
   }
 
   &-header {
-    .display-box();
-
+    display: flex;
     align-items: center;
     font-size: @font-size-heading;
     padding: @v-spacing-md @h-spacing-lg;
@@ -61,7 +59,7 @@
     font-size: @font-size-base;
     color: @color-text-caption;
     padding: 0 @h-spacing-lg;
-    .display-box();
+    display: flex;
 
     &-content {
       flex: 1;
diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less
index 62364add25..911375f569 100644
--- a/components/checkbox/style/index.less
+++ b/components/checkbox/style/index.less
@@ -19,7 +19,7 @@
     height: @icon-size-sm;
     border: 3px solid @color-text-caption;
     .border-radius(@radius-circle);
-    .transform(rotate(0deg));
+    transform: rotate(0deg);
     box-sizing: border-box;
 
     &:after {
@@ -33,7 +33,7 @@
       border-style: solid;
       border-width: 0 3px 3px 0;
       content: '\0020';
-      .transform(rotate(45deg));
+      transform: rotate(45deg);
     }
   }
 
diff --git a/components/flex/style/index.less b/components/flex/style/index.less
index bb5d176f5c..5db3105438 100644
--- a/components/flex/style/index.less
+++ b/components/flex/style/index.less
@@ -7,103 +7,103 @@
   text-align: left;
   overflow-y: hidden;
   display: flex;
-  .box-align;
+  align-items: center;
 
   &&-dir-row {
-    .flex-direction(row);
+    flex-direction: row;
   }
 
   &&-dir-row-reverse {
-    .flex-direction(row-reverse);
+    flex-direction: row-reverse;
   }
 
   &&-dir-column {
-    .flex-direction(column);
+    flex-direction: column;
   }
 
   &&-dir-column-reverse {
-    .flex-direction(column-reverse);
+    flex-direction: column-reverse;
   }
 
   &&-nowrap {
-    .flex-wrap(nowrap);
+    flex-wrap: nowrap;
   }
 
   &&-wrap {
-    .flex-wrap(wrap);
+    flex-wrap: wrap;
   }
 
   &&-wrap-reverse {
-    .flex-wrap(wrap-reverse);
+    flex-wrap: wrap-reverse;
   }
 
   &&-justify-start {
-    .flex-justify(flex-start);
+    justify-content: flex-start;
   }
 
   &&-justify-end {
-    .flex-justify(flex-end);
+    justify-content: flex-end;
   }
 
   &&-justify-center {
-    .flex-justify(center);
+    justify-content: center;
   }
 
   &&-justify-between {
-    .flex-justify(space-between);
+    justify-content: space-between;
   }
 
   &&-justify-around {
-    .flex-justify(space-around);
+    justify-content: space-around;
   }
 
   &&-align-top {
-    .box-align(flex-start);
+    align-items: flex-start;
   }
 
   &&-align-bottom {
-    .box-align(flex-end);
+    align-items: flex-end;
   }
 
   &&-align-middle {
-    .box-align(center);
+    align-items: center;
   }
 
   &&-align-stretch {
-    .box-align(stretch);
+    align-items: stretch;
   }
 
   &&-align-baseline {
-    .box-align(baseline);
+    align-items: baseline;
   }
 
   &&-align-content-start {
-    .box-align-content(flex-start);
+    align-content: flex-start;
   }
 
   &&-align-content-end {
-    .box-align(flex-end);
+    align-items: flex-end;
   }
 
   &&-align-content-center {
-    .box-align(center);
+    align-items: center;
   }
 
   &&-align-content-between {
-    .box-align(stretch);
+    align-items: stretch;
   }
 
   &&-align-content-around {
-    .box-align(baseline);
+    align-items: baseline;
   }
 
   &&-align-content-stretch {
-    .box-align(baseline);
+    align-items: baseline;
   }
 
   & &-item {
     box-sizing: border-box;
-    .box-flex(1);
+    flex: 1;
 
     margin-left: @h-spacing-md;
     min-width: 20px;
diff --git a/components/input-item/style/index.less b/components/input-item/style/index.less
index bb10dd7b2d..1528fbbaca 100644
--- a/components/input-item/style/index.less
+++ b/components/input-item/style/index.less
@@ -48,7 +48,7 @@
 
   .@{inputPrefixCls}-control {
     font-size: @input-font-size;
-    .box-flex(1);
+    flex: 1;
 
     input {
       color: @color-text-base;
diff --git a/components/list/style/index.less b/components/list/style/index.less
index 34fe063e0c..a10887a862 100644
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@@ -49,7 +49,7 @@
   vertical-align: middle;
   overflow: hidden;
   transition: background-color 200ms;
-  .box-align;
+  align-items: center;
 
   .@{listPrefixCls}-ripple {
     position: absolute;
@@ -71,7 +71,7 @@
 
   &.@{listPrefixCls}-item-top {
     .@{listPrefixCls}-line {
-      .box-align(flex-start);
+      align-items: flex-start;
 
       .@{listPrefixCls}-arrow {
         margin-top: 4px;
@@ -81,13 +81,13 @@
 
   &.@{listPrefixCls}-item-middle {
     .@{listPrefixCls}-line {
-      .box-align(center);
+      align-items: center;
     }
   }
 
   &.@{listPrefixCls}-item-bottom {
     .@{listPrefixCls}-line {
-      .box-align(flex-end);
+      align-items: flex-end;
     }
   }
 
@@ -202,12 +202,12 @@
 
       &-vertical {
         visibility: visible;
-        .transform(rotate(90deg));
+        transform: rotate(90deg);
       }
 
       &-vertical-up {
         visibility: visible;
-        .transform(rotate(270deg));
+        transform: rotate(270deg);
       }
     }
 
diff --git a/components/modal/style/Dialog.less b/components/modal/style/Dialog.less
index 50c7728422..6fe2032d00 100644
--- a/components/modal/style/Dialog.less
+++ b/components/modal/style/Dialog.less
@@ -27,7 +27,7 @@
     z-index: @modal-zindex;
     -webkit-overflow-scrolling: touch;
     outline: 0;
-    .display-box();
+    display: flex;
 
     align-items: center;
     justify-content: center;
diff --git a/components/modal/style/index.less b/components/modal/style/index.less
index 12afb82573..bcb15cd9a6 100644
--- a/components/modal/style/index.less
+++ b/components/modal/style/index.less
@@ -21,11 +21,11 @@
 
   &-button-group-h {
     border-top: @border-width-sm solid @border-color-base;
-    .display-box();
+    display: flex;
 
     .@{modalPrefixClass}-button {
       -webkit-touch-callout: none;
-      .box-flex();
+      flex: 1;
       .button-common();
 
       &:first-child {
diff --git a/components/notice-bar/style/index.less b/components/notice-bar/style/index.less
index 412afa3b22..4eba91b813 100644
--- a/components/notice-bar/style/index.less
+++ b/components/notice-bar/style/index.less
@@ -10,10 +10,10 @@
   font-size: @font-size-base;
   line-height: @notice-bar-height;
   color: @notice-bar-color;
-  .display-box();
+  display: flex;
 
   &-content {
-    .box-flex();
+    flex: 1;
 
     width: 100%;
     margin: auto @h-spacing-lg;
diff --git a/components/picker/style/index.less b/components/picker/style/index.less
index 3209174ae8..461db13091 100644
--- a/components/picker/style/index.less
+++ b/components/picker/style/index.less
@@ -43,8 +43,8 @@
     background-position: bottom;
     background-size: 100% 1px;
     background-repeat: no-repeat;
-    .display-box;
-    .box-align;
+    display: flex;
+    align-items: center;
     // border-bottom: @border-width-sm solid @border-color-base;
     position: relative;
     .hairline-bottom(@border-color-base);
@@ -67,7 +67,7 @@
   }
 
   &-title {
-    .box-flex(1);
+    flex: 1;
 
     text-align: center;
     color: @color-text-base;
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
index 5728b6b09d..d1cabbc844 100644
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -18,7 +18,7 @@
     width: @icon-size-xxs;
     height: @icon-size-xxs;
     box-sizing: border-box;
-    .transform(rotate(0deg));
+    transform: rotate(0deg);
 
     &:after {
       position: absolute;
@@ -31,7 +31,7 @@
       border-style: solid;
       border-width: 0 3px 3px 0;
       content: '\0020';
-      .transform(rotate(45deg));
+      transform: rotate(45deg);
     }
   }
 
diff --git a/components/segmented-control/style/index.less b/components/segmented-control/style/index.less
index 84c8c659e7..f626b2f1b4 100644
--- a/components/segmented-control/style/index.less
+++ b/components/segmented-control/style/index.less
@@ -4,7 +4,7 @@
 @segment-prefix-cls: am-segment;
 
 .@{segment-prefix-cls} {
-  .display-box;
+  display: flex;
 
   background-color: @fill-base;
   border-radius: @radius-md;
@@ -17,7 +17,7 @@
   }
 
   &-item {
-    .box-flex(1);
+    flex: 1;
 
     display: flex;
     justify-content: center;
diff --git a/components/style/mixins.less b/components/style/mixins.less
index a4b547dbed..5c5fefd1a8 100644
--- a/components/style/mixins.less
+++ b/components/style/mixins.less
@@ -1,12 +1,5 @@
 @import "./themes/default";
 
-.transform(@t) {
-  transform: @t;
-}
-.transform-origin(@to) {
-  transform-origin: @to;
-}
-
 .hairline-top(@color:@border-color-base, @width: @border-width-sm) {
   border-top: @width solid @color;
 }
@@ -120,10 +113,6 @@
   background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
 }
 
-.align-self(@as) {
-  align-self: @as;
-}
-
 .ellipsis() {
   width: auto;
   overflow: hidden;
@@ -131,34 +120,6 @@
   white-space: nowrap;
 }
 
-.display-box() {
-  display: flex;
-}
-
-.flex-direction(@direction: row) {
-  flex-direction: @direction;
-}
-
-.flex-wrap(@wrap: nowrap) {
-  flex-wrap: @wrap;
-}
-
-.flex-justify(@justify: flex-start) {
-  justify-content: @justify;
-}
-
-.box-align(@align: center) {
-  align-items: @align;
-}
-
-.box-align-content(@alignContent: stretch) {
-  align-content: @alignContent;
-}
-
-.box-flex(@scale: 1) {
-  flex: @scale;
-}
-
 .border-radius(@radius: 0) {
   border-radius: @radius;
   -webkit-background-clip: padding-box;
@@ -213,14 +174,3 @@
     -webkit-transform-origin: 0 0;
   }
 }
-
-.float-clear() {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: ' ';
-    clear: both;
-    height: 0;
-  }
-}
diff --git a/components/switch/style/index.less b/components/switch/style/index.less
index 49d127af73..a5c2119ac2 100644
--- a/components/switch/style/index.less
+++ b/components/switch/style/index.less
@@ -9,7 +9,7 @@
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  .align-self(center);
+  align-self: center;
 
   .checkbox {
     width: 102px;
@@ -38,7 +38,7 @@
       background: @fill-base;
       z-index: 1;
       transition: all 200ms;
-      .transform(scale(1));
+      transform: scale(1);
     }
 
     &:after {
@@ -51,7 +51,7 @@
       z-index: 2;
       left: 3px;
       top: 3px;
-      .transform(translateX(0px));
+      transform: translateX(0px);
 
       transition: all 200ms;
       box-shadow: 4px 4px 8px @color-shadow;
@@ -78,11 +78,11 @@
         background: @switch-fill;
 
         &:before {
-          .transform(scale(0));
+          transform: scale(0);
         }
 
         &:after {
-          .transform(translateX(40px));
+          transform: translateX(40px);
         }
       }
     }
@@ -119,11 +119,11 @@
           background: @switch-fill-android;
 
           &:before {
-            .transform(scale(0));
+            transform: scale(0);
           }
 
           &:after {
-            .transform(translateX(67px));
+            transform: translateX(67px);
           }
         }
       }
diff --git a/components/textarea-item/style/index.less b/components/textarea-item/style/index.less
index a825081c67..4ba543e3af 100644
--- a/components/textarea-item/style/index.less
+++ b/components/textarea-item/style/index.less
@@ -81,7 +81,7 @@
 }
 
 .@{textareaPrefixCls}-control {
-  .box-flex(1);
+  flex: 1;
 
   padding-top: 23px;
   padding-bottom: 21px;
diff --git a/components/toast/style/index.less b/components/toast/style/index.less
index 62c51305fe..0fb3fc9fe9 100644
--- a/components/toast/style/index.less
+++ b/components/toast/style/index.less
@@ -12,8 +12,7 @@
 
   &&-mask {
     height: 100%;
-    .display-box();
-
+    display: flex;
     justify-content: center;
     align-items: center;
     left: 0;