diff --git a/src/button/index.less b/src/button/index.less
index fb84ce10b..0c668126d 100644
--- a/src/button/index.less
+++ b/src/button/index.less
@@ -32,7 +32,7 @@
   }
 
   &:active::before {
-    opacity: .1;
+    opacity: 0.1;
   }
 
   &--loading,
diff --git a/src/cell/index.less b/src/cell/index.less
index 6109ed57a..0c7163144 100644
--- a/src/cell/index.less
+++ b/src/cell/index.less
@@ -1,5 +1,5 @@
 @import '../style/var';
-@import "../style/mixins/hairline";
+@import '../style/mixins/hairline';
 
 .van-cell {
   position: relative;
diff --git a/src/checkbox/index.less b/src/checkbox/index.less
index 9b765345c..c2edf00fa 100644
--- a/src/checkbox/index.less
+++ b/src/checkbox/index.less
@@ -28,7 +28,7 @@
       width: 1.25em;
       height: 1.25em;
       color: transparent;
-      font-size: .8em;
+      font-size: 0.8em;
       line-height: inherit;
       text-align: center;
       border: 1px solid @checkbox-border-color;
diff --git a/src/col/index.less b/src/col/index.less
index 9d39cd27e..35fa2f4f5 100644
--- a/src/col/index.less
+++ b/src/col/index.less
@@ -8,7 +8,13 @@
 
 .generate-col(24);
 .generate-col(@n, @i: 1) when (@i =< @n) {
-  .van-col--@{i} { width: @i * 100% / 24; }
-  .van-col--offset-@{i} { margin-left: @i * 100% / 24; }
+  .van-col--@{i} {
+    width: @i * 100% / 24;
+  }
+
+  .van-col--offset-@{i} {
+    margin-left: @i * 100% / 24;
+  }
+
   .generate-col(@n, (@i + 1));
 }
diff --git a/src/divider/index.less b/src/divider/index.less
index 57d073b11..962964c45 100644
--- a/src/divider/index.less
+++ b/src/divider/index.less
@@ -29,7 +29,7 @@
   &--hairline {
     &::before,
     &::after {
-      transform: scaleY(.5);
+      transform: scaleY(0.5);
     }
   }
 
diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
index 70cdd97cf..ff747bc28 100644
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@@ -46,7 +46,7 @@
       border: 3px solid;
       border-color: transparent transparent currentColor currentColor;
       transform: rotate(-45deg);
-      opacity: .8;
+      opacity: 0.8;
       content: '';
     }
 
diff --git a/src/field/index.less b/src/field/index.less
index ae73ebf5a..366ec186e 100644
--- a/src/field/index.less
+++ b/src/field/index.less
@@ -56,14 +56,14 @@
     }
 
     // for ios wechat
-    &[type="date"],
-    &[type="time"],
-    &[type="datetime-local"] {
+    &[type='date'],
+    &[type='time'],
+    &[type='datetime-local'] {
       min-height: @cell-line-height;
     }
 
     // for safari
-    &[type="search"] {
+    &[type='search'] {
       -webkit-appearance: none;
     }
   }
diff --git a/src/notice-bar/index.less b/src/notice-bar/index.less
index 9d00acd63..f7dad9211 100644
--- a/src/notice-bar/index.less
+++ b/src/notice-bar/index.less
@@ -69,9 +69,13 @@
  * In case that some mobile browsers can continue animation when className changed
  */
 @keyframes van-notice-bar-play {
-  to { transform: translate3d(-100%, 0, 0); }
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
 }
 
 @keyframes van-notice-bar-play-infinite {
-  to { transform: translate3d(-100%, 0, 0); }
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
 }
diff --git a/src/password-input/index.less b/src/password-input/index.less
index 98b8b189b..14a2f00e8 100644
--- a/src/password-input/index.less
+++ b/src/password-input/index.less
@@ -46,9 +46,9 @@
       left: 50%;
       width: @password-input-dot-size;
       height: @password-input-dot-size;
-      margin: -(@password-input-dot-size / 2) 0 0 -(@password-input-dot-size / 2);
       background-color: @password-input-dot-color;
       border-radius: 100%;
+      transform: translate(-50%, -50%);
       visibility: hidden;
     }
   }
@@ -61,7 +61,8 @@
     height: @number-keyboard-cursor-height;
     background-color: @number-keyboard-cursor-color;
     transform: translate(-50%, -50%);
-    animation: @number-keyboard-cursor-animation-duration van-cursor-flicker infinite;
+    animation: @number-keyboard-cursor-animation-duration van-cursor-flicker
+      infinite;
   }
 }
 
diff --git a/src/radio/index.less b/src/radio/index.less
index 637d24e0e..45d0e006a 100644
--- a/src/radio/index.less
+++ b/src/radio/index.less
@@ -28,7 +28,7 @@
       width: 1.25em;
       height: 1.25em;
       color: transparent;
-      font-size: .8em;
+      font-size: 0.8em;
       line-height: inherit;
       text-align: center;
       border: 1px solid @radio-border-color;
diff --git a/src/rate/index.less b/src/rate/index.less
index ff5259a6b..4d39d2c8e 100644
--- a/src/rate/index.less
+++ b/src/rate/index.less
@@ -22,7 +22,7 @@
       position: absolute;
       top: 0;
       left: 0;
-      width: .5em;
+      width: 0.5em;
       overflow: hidden;
     }
   }
diff --git a/src/row/index.less b/src/row/index.less
index ff122e49a..3858f4d68 100644
--- a/src/row/index.less
+++ b/src/row/index.less
@@ -4,7 +4,7 @@
   &::after {
     display: table;
     clear: both;
-    content: "";
+    content: '';
   }
 
   &--flex {
diff --git a/src/skeleton/index.less b/src/skeleton/index.less
index 96c46e576..2f368e093 100644
--- a/src/skeleton/index.less
+++ b/src/skeleton/index.less
@@ -43,12 +43,13 @@
   }
 
   &--animate {
-    animation: van-skeleton-blink @skeleton-animation-duration ease-in-out infinite;
+    animation: van-skeleton-blink @skeleton-animation-duration ease-in-out
+      infinite;
   }
 }
 
 @keyframes van-skeleton-blink {
   50% {
-    opacity: .6;
+    opacity: 0.6;
   }
 }
diff --git a/src/sku/index.less b/src/sku/index.less
index a3c0f219a..fb6abc264 100644
--- a/src/sku/index.less
+++ b/src/sku/index.less
@@ -102,7 +102,7 @@
       width: 100%;
       height: 100%;
       background: currentColor;
-      opacity: .1;
+      opacity: 0.1;
       content: '';
     }
   }
@@ -178,7 +178,7 @@
 
         &::before {
           background: currentColor;
-          opacity: .1;
+          opacity: 0.1;
         }
       }
 
@@ -188,7 +188,7 @@
         cursor: not-allowed;
 
         .van-sku-row__item-img {
-          opacity: .3;
+          opacity: 0.3;
         }
       }
     }
@@ -282,7 +282,7 @@
       z-index: 1;
       padding: 6px;
       color: @sku-upload-mask-color;
-      opacity: .8;
+      opacity: 0.8;
 
       &::before {
         background-color: @white;
diff --git a/src/stepper/index.less b/src/stepper/index.less
index a261e1625..dcfdd6eee 100644
--- a/src/stepper/index.less
+++ b/src/stepper/index.less
@@ -95,8 +95,8 @@
     }
   }
 
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
     margin: 0;
     -webkit-appearance: none;
   }
diff --git a/src/style/animation.less b/src/style/animation.less
index 37fce7f54..007440f53 100644
--- a/src/style/animation.less
+++ b/src/style/animation.less
@@ -1,4 +1,4 @@
-@import "./var";
+@import './var';
 
 @keyframes van-slide-up-enter {
   from {
diff --git a/src/style/reset.less b/src/style/reset.less
index 41dd438ac..7e2108539 100644
--- a/src/style/reset.less
+++ b/src/style/reset.less
@@ -149,7 +149,7 @@ summary {
 
 body {
   color: @text-color;
-  font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
+  font-family: Arial, Helvetica, 'Microsoft YaHei', Tohoma, sans-serif;
   background-color: @background-color;
 }
 
diff --git a/src/style/var.less b/src/style/var.less
index 4b7b25431..4de7b59e9 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -23,8 +23,8 @@
 // Component Colors
 @text-color: @gray-8;
 @active-color: @gray-2;
-@active-opacity: .7;
-@disabled-opacity: .5;
+@active-opacity: 0.7;
+@disabled-opacity: 0.5;
 @background-color: @gray-1;
 @background-color-light: #fafafa;
 
@@ -42,11 +42,12 @@
 @font-size-md: 14px;
 @font-size-lg: 16px;
 @font-weight-bold: 500;
-@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
+  sans-serif;
 
 // Animation
-@animation-duration-base: .3s;
-@animation-duration-fast: .2s;
+@animation-duration-base: 0.3s;
+@animation-duration-fast: 0.2s;
 
 // Border
 @border-color: @gray-3;
@@ -150,7 +151,7 @@
 @calendar-range-edge-color: @white;
 @calendar-range-edge-background-color: @red;
 @calendar-range-middle-color: @red;
-@calendar-range-middle-background-opacity: .1;
+@calendar-range-middle-background-opacity: 0.1;
 @calendar-selected-day-size: 54px;
 @calendar-selected-day-color: @white;
 @calendar-info-font-size: @font-size-xs;
@@ -402,7 +403,7 @@
 @image-preview-index-text-color: @white;
 @image-preview-index-font-size: @font-size-md;
 @image-preview-index-text-shadow: 0 1px 1px @gray-8;
-@image-preview-overlay-background-color: rgba(0, 0, 0, .9);
+@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
 
 // List
 @list-icon-margin-right: 5px;
@@ -415,7 +416,7 @@
 @loading-text-font-size: @font-size-md;
 @loading-spinner-color: @gray-5;
 @loading-spinner-size: 30px;
-@loading-spinner-animation-duration: .8s;
+@loading-spinner-animation-duration: 0.8s;
 
 // NavBar
 @nav-bar-height: 46px;
@@ -507,9 +508,9 @@
 @picker-action-active-color: @active-color;
 @picker-option-font-size: @font-size-lg;
 @picker-option-text-color: @black;
-@picker-option-disabled-opacity: .3;
+@picker-option-disabled-opacity: 0.3;
 @picker-loading-icon-color: @blue;
-@picker-loading-mask-color: rgba(255, 255, 255, .9);
+@picker-loading-mask-color: rgba(255, 255, 255, 0.9);
 
 // Popup
 @popup-background-color: @white;
@@ -552,7 +553,7 @@
 
 // Search
 @search-padding: 10px @padding-sm;
-@search-background-color: #f7f8fA;
+@search-background-color: @gray-1;
 @search-input-height: 34px;
 @search-label-padding: 0 5px;
 @search-label-color: @text-color;
@@ -593,7 +594,7 @@
 @slider-button-height: 24px;
 @slider-button-border-radius: 50%;
 @slider-button-background-color: @white;
-@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 
 // Step
 @step-text-color: @gray-6;
@@ -652,7 +653,7 @@
 @swipe-indicator-size: 6px;
 @swipe-indicator-margin: @padding-sm;
 @swipe-indicator-active-opacity: 1;
-@swipe-indicator-inactive-opacity: .3;
+@swipe-indicator-inactive-opacity: 0.3;
 @swipe-indicator-active-background-color: @blue;
 @swipe-indicator-inactive-background-color: @border-color;
 
@@ -663,12 +664,13 @@
 @switch-node-size: 1em;
 @switch-node-z-index: 1;
 @switch-node-background-color: @white;
-@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
+  0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
 @switch-background-color: @white;
 @switch-on-background-color: @blue;
 @switch-transition-duration: @animation-duration-base;
 @switch-disabled-opacity: @disabled-opacity;
-@switch-border: @border-width-base solid rgba(0, 0, 0, .1);
+@switch-border: @border-width-base solid rgba(0, 0, 0, 0.1);
 
 // SwitchCell
 @switch-cell-padding-top: @cell-vertical-padding - 1px;
@@ -703,12 +705,12 @@
 @tabs-bottom-bar-color: @tabs-default-color;
 
 // Tag
-@tag-padding: .2em .5em;
+@tag-padding: 0.2em 0.5em;
 @tag-font-size: @font-size-xs;
 @tag-medium-font-size: @font-size-sm;
 @tag-large-font-size: @font-size-md;
 @tag-text-color: @white;
-@tag-border-radius: .2em;
+@tag-border-radius: 0.2em;
 @tag-round-border-radius: @border-radius-max;
 @tag-danger-color: @red;
 @tag-primary-color: @blue;
@@ -767,4 +769,4 @@
 // Sku
 @sku-item-background-color: @background-color;
 @sku-icon-gray-color: #dcdde0;
-@sku-upload-mask-color: rgba(50, 50, 51, .8);
+@sku-upload-mask-color: rgba(50, 50, 51, 0.8);
diff --git a/src/swipe/index.less b/src/swipe/index.less
index 9cd560eba..41f10403e 100644
--- a/src/swipe/index.less
+++ b/src/swipe/index.less
@@ -36,7 +36,7 @@
     background-color: @swipe-indicator-inactive-background-color;
     border-radius: 100%;
     opacity: @swipe-indicator-inactive-opacity;
-    transition: opacity .2s;
+    transition: opacity 0.2s;
 
     &:not(:last-child) {
       margin-right: @swipe-indicator-size;
diff --git a/src/switch/index.less b/src/switch/index.less
index 9fff5d0d6..b3b8c88db 100644
--- a/src/switch/index.less
+++ b/src/switch/index.less
@@ -23,7 +23,8 @@
     background-color: @switch-node-background-color;
     border-radius: 100%;
     box-shadow: @switch-node-box-shadow;
-    transition: transform @switch-transition-duration cubic-bezier(.3, 1.05, .4, 1.05);
+    transition: transform @switch-transition-duration
+      cubic-bezier(0.3, 1.05, 0.4, 1.05);
   }
 
   &__loading {
diff --git a/src/tag/index.less b/src/tag/index.less
index 6d3dbaf42..b7ebdb053 100644
--- a/src/tag/index.less
+++ b/src/tag/index.less
@@ -59,7 +59,7 @@
   }
 
   &--mark {
-    padding-right: .7em;
+    padding-right: 0.7em;
 
     &,
     &::after {