From 9dd8a93067fb1b1ebf3ce0f45f9ad64cdc2d2bf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Tue, 5 Sep 2017 10:50:17 +0800
Subject: [PATCH] vant-css: use hairline classes instead of mixins

---
 build/bin/build-lib.js                        |  2 +-
 packages/actionsheet/index.vue                |  6 +-
 packages/badge-group/index.vue                |  2 +-
 packages/badge/index.vue                      |  3 +-
 packages/cell-group/index.vue                 |  2 +-
 packages/cell/index.vue                       |  2 +-
 packages/deep-select/index.vue                |  8 +--
 packages/dialog/dialog.vue                    | 20 +++++-
 packages/field/index.vue                      |  1 +
 packages/goods-action-mini-btn/index.vue      |  2 +-
 packages/order-coupon-list/index.vue          |  2 +-
 packages/order-goods/Card.vue                 |  6 +-
 packages/order-goods/Empty.vue                |  2 +-
 packages/panel/index.vue                      |  8 +--
 packages/picker/index.vue                     |  2 +-
 packages/step/index.vue                       |  2 +-
 packages/steps/index.vue                      | 14 ++--
 packages/switch/index.vue                     | 17 +----
 packages/tabs/index.vue                       |  4 +-
 packages/tag/index.vue                        |  2 +-
 packages/vant-css/src/actionsheet.css         | 25 +++----
 packages/vant-css/src/badge.css               | 64 ++++++------------
 packages/vant-css/src/base.css                |  5 +-
 packages/vant-css/src/button.css              | 17 +++--
 packages/vant-css/src/card.css                |  7 +-
 packages/vant-css/src/cell-swipe.css          |  2 +
 packages/vant-css/src/cell.css                | 36 +++-------
 packages/vant-css/src/checkbox.css            |  8 +--
 packages/vant-css/src/col.css                 |  2 +
 packages/vant-css/src/common/hairline.css     | 41 ++++++++++++
 packages/vant-css/src/common/normalize.css    | 27 ++++++++
 packages/vant-css/src/common/var.css          | 66 +++++++++----------
 packages/vant-css/src/deep-select.css         |  9 ++-
 packages/vant-css/src/dialog.css              | 21 ++----
 packages/vant-css/src/express-way.css         |  8 ++-
 packages/vant-css/src/field.css               | 15 +----
 packages/vant-css/src/goods-action.css        | 16 ++---
 packages/vant-css/src/image-preview.css       |  3 +-
 packages/vant-css/src/index.css               |  1 +
 packages/vant-css/src/invalid-goods.css       | 15 +++--
 packages/vant-css/src/loading.css             |  4 +-
 .../vant-css/src/mixins/border_retina.css     | 24 +++++--
 packages/vant-css/src/notice-bar.css          |  2 +-
 packages/vant-css/src/order-coupon.css        | 28 +++-----
 packages/vant-css/src/order-goods.css         | 47 ++++++-------
 packages/vant-css/src/panel.css               | 24 ++-----
 packages/vant-css/src/pay-order.css           | 12 ++--
 packages/vant-css/src/picker.css              | 14 +---
 packages/vant-css/src/popup.css               |  9 +--
 packages/vant-css/src/progress.css            |  4 +-
 packages/vant-css/src/quantity.css            | 20 +++---
 packages/vant-css/src/radio.css               |  6 +-
 packages/vant-css/src/reset.css               | 10 ++-
 packages/vant-css/src/row.css                 |  3 +-
 packages/vant-css/src/search.css              | 17 ++---
 packages/vant-css/src/steps.css               | 34 ++++------
 packages/vant-css/src/swipe.css               |  4 +-
 packages/vant-css/src/switch-cell.css         |  2 +
 packages/vant-css/src/switch.css              | 34 +++++-----
 packages/vant-css/src/tab.css                 | 38 +++--------
 packages/vant-css/src/tag.css                 | 24 ++++---
 packages/vant-css/src/toast.css               | 18 ++---
 packages/vant-css/src/uploader.css            |  7 +-
 63 files changed, 414 insertions(+), 466 deletions(-)
 create mode 100644 packages/vant-css/src/common/hairline.css
 create mode 100644 packages/vant-css/src/common/normalize.css

diff --git a/build/bin/build-lib.js b/build/bin/build-lib.js
index d20e2ba7c..b173bb4dc 100644
--- a/build/bin/build-lib.js
+++ b/build/bin/build-lib.js
@@ -42,7 +42,7 @@ components.forEach((componentName) => {
   const dir = path.join(__dirname, '../../lib/', componentName, '/style');
   const file = path.join(dir, 'index.js');
   const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`);
-  const content = [];
+  const content = [`require('../../vant-css/base.css');`];
   if (fs.existsSync(cssPath)) {
     content.push(`require('../../vant-css/${componentName}.css');`);
   }
diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 04f206ba2..0ce765aaa 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="van-actionsheet-float">
     <div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
-      <div class="van-actionsheet__header" v-if="title">
+      <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
         <h3 v-text="title" />
         <van-icon name="close" @click.stop="$emit('input', false)" />
       </div>
@@ -9,7 +9,7 @@
         <li
           v-for="(item, index) in actions"
           :key="index"
-          :class="['van-actionsheet__item', item.className, { 'van-actionsheet__item--loading': item.loading }]"
+          :class="['van-actionsheet__item', 'van-hairline--top', item.className, { 'van-actionsheet__item--loading': item.loading }]"
           @click.stop="onClickItem(item)">
           <template v-if="!item.loading">
             <span class="van-actionsheet__name">{{ item.name }}</span>
@@ -18,7 +18,7 @@
           <van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
         </li>
       </ul>
-      <div class="van-actionsheet__item van-actionsheet__cancel" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
+      <div class="van-actionsheet__item van-actionsheet__cancel van-hairline--top" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
       <div class="van-actionsheet__content" v-else>
         <slot></slot>
       </div>
diff --git a/packages/badge-group/index.vue b/packages/badge-group/index.vue
index 1fc386423..e2991a11f 100644
--- a/packages/badge-group/index.vue
+++ b/packages/badge-group/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-badge-group">
+  <div class="van-badge-group van-hairline--top-bottom">
     <slot></slot>
   </div>
 </template>
diff --git a/packages/badge/index.vue b/packages/badge/index.vue
index 9ed36df14..801b19e30 100644
--- a/packages/badge/index.vue
+++ b/packages/badge/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <a :class="['van-badge', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
-    <div class="van-badge__active"></div>
+  <a :class="['van-badge van-hairline', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
     <div v-if="info" class="van-badge__info">{{ info }}</div>
     {{ title }}
   </a>
diff --git a/packages/cell-group/index.vue b/packages/cell-group/index.vue
index b4c6fb1ae..3672912b1 100644
--- a/packages/cell-group/index.vue
+++ b/packages/cell-group/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-cell-group">
+  <div class="van-cell-group van-hairline--top-bottom">
     <slot></slot>
   </div>
 </template>
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index 3bcf14a33..aa50d3020 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
+  <a :class="['van-cell', 'van-hairline', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
     <div
       class="van-cell__title"
       v-if="$slots.title || title"
diff --git a/packages/deep-select/index.vue b/packages/deep-select/index.vue
index 410b6ae86..5071d234c 100644
--- a/packages/deep-select/index.vue
+++ b/packages/deep-select/index.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="van-deep-select" v-bind:style="{ height: mainHeight + 'px' }">
+  <div class="van-deep-select" :style="{ height: mainHeight + 'px' }">
     <div class="van-deep-select__nav">
       <div
         v-for="(item, index) in items"
         class="van-deep-select__nitem"
-        v-bind:class="{ 'van-deep-select__nitem--active': mainActiveIndex === index }"
+        :class="{ 'van-deep-select__nitem--active': mainActiveIndex === index }"
         @click="onNavClick(index)">
         {{ item.text }}
       </div>
     </div>
-    <div class="van-deep-select__content" v-bind:style="{ height: itemHeight + 'px' }">
+    <div class="van-deep-select__content" :style="{ height: itemHeight + 'px' }">
       <div
         v-for="item in subItems"
         :key="item.id"
         class="van-deep-select__item"
-        v-bind:class="{ 'van-deep-select__item--active': activeId === item.id }"
+        :class="{ 'van-deep-select__item--active': activeId === item.id }"
         @click="onItemSelect(item)">
         {{ item.text }}
         <van-icon
diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue
index 7aec18626..8fc026f4f 100644
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@@ -2,14 +2,28 @@
   <transition name="van-dialog-bounce">
     <div class="van-dialog" v-show="value">
       <div class="van-dialog__header" v-if="title" v-text="title" />
-      <div class="van-dialog__content">
+      <div class="van-dialog__content van-hairline">
         <slot>
           <div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
         </slot>
       </div>
       <div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-        <van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button>
-        <van-button size="large" class="van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</van-button>
+        <van-button
+          size="large"
+          class="van-dialog__cancel"
+          v-show="showCancelButton"
+          @click="handleAction('cancel')"
+        >
+          {{ cancelButtonText }}
+        </van-button>
+        <van-button
+          size="large"
+          :class="['van-dialog__confirm', { 'van-hairline--left': showCancelButton && showConfirmButton }]"
+          v-show="showConfirmButton"
+          @click="handleAction('confirm')"
+        >
+          {{ confirmButtonText }}
+        </van-button>
       </div>
     </div>
   </transition>
diff --git a/packages/field/index.vue b/packages/field/index.vue
index c2f32d3e9..e7b5cb489 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -9,6 +9,7 @@
       'van-field--disabled': disabled,
       'van-field--error': error,
       'van-field--border': border,
+      'van-hairline--surround': border,
       'van-field--autosize': autosize,
       'van-field--has-icon': showIcon
     }">
diff --git a/packages/goods-action-mini-btn/index.vue b/packages/goods-action-mini-btn/index.vue
index 4f91fd443..bc7ed9b0c 100644
--- a/packages/goods-action-mini-btn/index.vue
+++ b/packages/goods-action-mini-btn/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :href="url" class="van-goods-action__mini-btn" @click="$emit('click', $event);">
+  <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="$emit('click', $event);">
     <van-icon :class="['van-goods-action__mini-btn-icon', iconClass]" :name="icon" />
     <slot></slot>
   </a>
diff --git a/packages/order-coupon-list/index.vue b/packages/order-coupon-list/index.vue
index 4daead65b..5513f491b 100644
--- a/packages/order-coupon-list/index.vue
+++ b/packages/order-coupon-list/index.vue
@@ -21,7 +21,7 @@
         :data="item"
       />
     </div>
-    <div class="van-order-coupon-list__close" @click="onClickNotUse">{{ closeButtonText }}</div>
+    <div class="van-order-coupon-list__close van-hairline--top" @click="onClickNotUse">{{ closeButtonText }}</div>
   </van-popup>
 </template>
 
diff --git a/packages/order-goods/Card.vue b/packages/order-goods/Card.vue
index edfa63b90..411047c35 100644
--- a/packages/order-goods/Card.vue
+++ b/packages/order-goods/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-order-goods-card">
+  <div class="van-order-goods-card van-hairline">
     <van-card>
       <div slot="thumb">
         <img :src="data.img_url" />
@@ -29,11 +29,11 @@
         </div>
       </template>
     </van-card>
-    <van-cell class="van-order-goods-card__delivery" v-if="data.show_delivery_time" title="发货时间" :value="data.delivery_time" />
+    <van-cell class="van-order-goods-card__delivery van-hairline--top" v-if="data.show_delivery_time" title="发货时间" :value="data.delivery_time" />
     <van-popup v-if="hasMessage" class="van-order-goods-card__message" v-model="showMessage" position="right">
       <h2>备注信息</h2>
       <ul>
-        <li v-for="(value, key) in data.message">
+        <li v-for="(value, key) in data.message" class="van-hairline">
           <label>{{ key }}</label>
           <a v-if="isURL(value)" :href="value">
             <img :src="value" />
diff --git a/packages/order-goods/Empty.vue b/packages/order-goods/Empty.vue
index f997cfe1a..4998d3404 100644
--- a/packages/order-goods/Empty.vue
+++ b/packages/order-goods/Empty.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-order-goods-empty">
+  <div class="van-order-goods-empty van-hairline--top">
     <img :src="icon" />
     <p>{{ message }}</p>
     <van-button @click="$emit('clickEmptyButton')">{{ buttonText }}</van-button>
diff --git a/packages/panel/index.vue b/packages/panel/index.vue
index eed3760d7..60107b200 100644
--- a/packages/panel/index.vue
+++ b/packages/panel/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="van-panel">
-    <div class="van-panel__header">
+  <div class="van-panel van-hairline--top-bottom">
+    <div class="van-panel__header van-hairline--bottom">
       <slot name="header">
         <h4 class="van-panel__title" v-text="title"></h4>
         <span class="van-panel__desc" v-if="desc" v-text="desc"></span>
@@ -10,7 +10,7 @@
     <div class="van-panel__content">
       <slot></slot>
     </div>
-    <div class="van-panel__footer" v-if="$slots.footer">
+    <div class="van-panel__footer van-hairline--top" v-if="$slots.footer">
       <slot name="footer"></slot>
     </div>
   </div>
@@ -20,8 +20,8 @@
 export default {
   name: 'van-panel',
   props: {
-    title: String,
     desc: String,
+    title: String,
     status: String
   }
 };
diff --git a/packages/picker/index.vue b/packages/picker/index.vue
index 5468a326d..beb7fca87 100644
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="van-picker">
-    <div class="van-picker__toolbar" v-show="showToolbar">
+    <div class="van-picker__toolbar van-hairline--top-bottom" v-show="showToolbar">
       <slot>
         <a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
         <a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
diff --git a/packages/step/index.vue b/packages/step/index.vue
index 39c800014..62762dca1 100644
--- a/packages/step/index.vue
+++ b/packages/step/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-step" :class="stepClass">
+  <div class="van-step van-hairline" :class="stepClass">
     <div class="van-step__circle-container">
       <i class="van-step__circle" v-if="status !== 'process'"></i>
       <i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else></i>
diff --git a/packages/steps/index.vue b/packages/steps/index.vue
index c246f91d3..800cfd118 100644
--- a/packages/steps/index.vue
+++ b/packages/steps/index.vue
@@ -16,8 +16,8 @@
       </slot>
     </div>
     <div class="van-steps__items" :class="{
-      'van-steps__items--alone': !title && !description
-    }">
+        'van-steps__items--alone': !title && !description
+      }">
       <slot></slot>
     </div>
   </div>
@@ -60,11 +60,11 @@ export default {
 
   computed: {
     stepsClass() {
-      const direction = this.direction;
-      const lengthClass = `van-steps--${this.steps.length}`;
-      const directionClass = `van-steps--${direction}`;
-
-      return direction === 'horizontal' ? [lengthClass, directionClass] : [directionClass];
+      return [
+        `van-steps--${this.direction}`, {
+          [`van-steps--${this.steps.length}`]: this.direction === 'horizontal'
+        }
+      ];
     }
   }
 };
diff --git a/packages/switch/index.vue b/packages/switch/index.vue
index e8f175984..aba154f22 100644
--- a/packages/switch/index.vue
+++ b/packages/switch/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="van-switch" :class="switchStates" @click="toggleState">
-    <div class="van-switch__node">
-      <van-loading v-if="loading" class="van-switch__loading"></van-loading>
+  <div class="van-switch" :class="[`van-switch--${checked ? 'on' : 'off'}`, { 'van-switch--disabled': disabled }]" @click="toggleState">
+    <div class="van-switch__node van-hairline-surround">
+      <van-loading v-if="loading" class="van-switch__loading" />
     </div>
     <div class="van-switch__bg"></div>
   </div>
@@ -35,17 +35,6 @@ export default {
       this.checked = val;
     }
   },
-  computed: {
-    switchStates: function() {
-      const switchStates = ['van-switch--' + (this.checked ? 'on' : 'off')];
-
-      if (this.disabled) {
-        switchStates.push('van-switch--disabled');
-      }
-
-      return switchStates;
-    }
-  },
   methods: {
     /*
      * 开关状态交互。
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 5a9cac1e2..e1849b673 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -7,7 +7,7 @@
           <div
             v-for="(tab, index) in tabs"
             :key="index"
-            class="van-tab"
+            class="van-tab van-hairline"
             :class="{'van-tab--active': index === curActive}"
             ref="tabkey"
             @click="handleTabClick(index, tab)"
@@ -26,7 +26,7 @@
       <div
         v-for="(tab, index) in tabs"
         :key="index"
-        class="van-tab"
+        class="van-tab van-hairline"
         :class="{'van-tab--active': index === curActive}"
         ref="tabkey"
         @click="handleTabClick(index, tab)"
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index 4fd9ad45d..4fcdc1fa1 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="['van-tag', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]">
+  <span :class="['van-tag', 'van-hairline--surround', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]">
     <slot></slot>
   </span>
 </template>
diff --git a/packages/vant-css/src/actionsheet.css b/packages/vant-css/src/actionsheet.css
index ffae808ff..628137900 100644
--- a/packages/vant-css/src/actionsheet.css
+++ b/packages/vant-css/src/actionsheet.css
@@ -1,19 +1,16 @@
 @import './common/var.css';
-@import './mixins/border_retina.css';
-@import './popup.css';
 
 .van-actionsheet {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
-  color: $c-black;
+  color: $text-color;
   transition: .2s ease-out;
-  background-color: #e0e0e0;
-  backface-visibility: hidden;
+  background-color: $background-color;
 
   &--withtitle {
-    background-color: $c-white;
+    background-color: $white;
   }
 
   &__item {
@@ -21,17 +18,16 @@
     line-height: 50px;
     font-size: 16px;
     text-align: center;
-    position: relative;
-    background-color: $c-white;
+    background-color: $white;
 
-    &::after {
-      @mixin border-retina (top);
+    &:active {
+      background-color: $active-color;
     }
   }
 
   &__subname {
     font-size: 12px;
-    color: $c-gray-darker;
+    color: $gray-darker;
   }
 
   &__loading {
@@ -39,17 +35,12 @@
   }
 
   &__cancel {
-    margin-top: 5px;
+    margin-top: 10px;
   }
 
   &__header {
     line-height: 44px;
     text-align: center;
-    position: relative;
-
-    &::after {
-      @mixin border-retina (top, bottom);
-    }
 
     .van-icon-close {
       top: 11px;
diff --git a/packages/vant-css/src/badge.css b/packages/vant-css/src/badge.css
index d79285264..a71716807 100644
--- a/packages/vant-css/src/badge.css
+++ b/packages/vant-css/src/badge.css
@@ -1,49 +1,34 @@
 @import './common/var.css';
-@import './mixins/border_retina.css';
 
 .van-badge {
-
   display: block;
   overflow: hidden;
-  position: relative;
-  padding: 20px 12px;
-  box-sizing: border-box;
-  line-height: 1.4;
-  background-color: $c-background;
-  color: $c-gray-darker;
   font-size: 14px;
-  text-decoration: none;
+  line-height: 1.4;
+  box-sizing: border-box;
+  padding: 20px 12px 20px 9px;
+  color: $gray-darker;
+  background-color: $background-color;
   word-break: break-all;
+  border-left: 3px solid transparent;
+
+  &:not(:last-child)::after {
+    border-bottom-width: 1px;
+  }
 
   &-group {
-    position: relative;
     width: 85px;
-
-    &::after {
-      @mixin border-retina (top);
-    }
   }
 
   &--select {
     font-weight: bold;
-    color: $c-black;
-    background-color: $c-white;
-    .van-badge__active {
-      display: block;
-    }
-    &::after {
-      @mixin border-retina (top, right, left);
-    }
-  }
+    color: $text-color;
+    border-color: $red;
+    background-color: $white;
 
-  &__active {
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 3px;
-    height: 100%;
-    background-color: #FF4444;
+    &::after {
+      border-right-width: 1px;
+    }
   }
 
   &__info {
@@ -51,25 +36,14 @@
     top: 2px;
     right: 2px;
     font-size: 10px;
-    transform:scale(0.8);
+    color: $white;    
+    transform: scale(0.8);
     text-align: center;
     box-sizing: border-box;
     padding: 0 6px;
     min-width: 18px;
-    height: 18px;
     line-height: 18px;
     border-radius: 9px;
-    background-color: #FF4444;
-    color: $c-white;
-  }
-
-  &::after {
-    @mixin border-retina (bottom);
-  }
-
-  &:last-child {
-    &::after {
-      border-bottom: 0;
-    }
+    background-color: $red;
   }
 }
diff --git a/packages/vant-css/src/base.css b/packages/vant-css/src/base.css
index c2aa5264e..5cbf9bc24 100644
--- a/packages/vant-css/src/base.css
+++ b/packages/vant-css/src/base.css
@@ -2,4 +2,7 @@
  * 基本样式入口
  */
 
-@import './reset.css';
+@import "./common/var.css";
+@import "./common/normalize.css";
+@import "./common/hairline.css";
+
diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 81ce54d89..b058230a3 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -10,10 +10,9 @@
   box-sizing: border-box;
   font-size: 16px;
   text-align: center;
-  outline: 0;
   -webkit-appearance: none;
 
-  &::after {
+  &::before {
     content: " ";
     position: absolute;
     top: 0;
@@ -21,11 +20,11 @@
     right: 0;
     bottom: 0;
     opacity: 0;
-    background-color: #000;
+    background-color: $black;
     border-radius: inherit; /* inherit parent's border radius */
   }
 
-  &:not(.is-disabled):active::after {
+  &:not(.is-disabled):active::before {
     opacity: .3;
   }
 
@@ -39,7 +38,7 @@
     border: 1px solid $button-default-border-color;
 
     &:active {
-      color: $c-gray-dark;
+      color: $gray-dark;
     }
   }
 
@@ -73,6 +72,12 @@
     font-size: 12px;
   }
 
+  &--loading {
+    .van-button__text {
+      display: none;
+    }
+  }
+
   /* mini图标默认宽度50px，文字不能超过4个 */
   &--mini {
     display: inline-block;
@@ -108,7 +113,7 @@
     background-color: $bottom-action-button-default-background-color;
 
     &:active {
-      color: #fff;
+      color: $white;
     }
 
     &.van-button--primary {
diff --git a/packages/vant-css/src/card.css b/packages/vant-css/src/card.css
index 31916fd60..8c72df06e 100644
--- a/packages/vant-css/src/card.css
+++ b/packages/vant-css/src/card.css
@@ -1,7 +1,8 @@
+@import './common/var.css';
 @import './mixins/ellipsis.css';
 
 .van-card {
-  color: #333;
+  color: $text-color;
   height: 90px;
   background: #fafafa;
   position: relative;
@@ -58,7 +59,7 @@
   }
 
   &__desc {
-    color: #666;
+    color: $gray-darker;
     font-size: 12px;
     max-height: 20px;
     @mixin multi-ellipsis 1;
@@ -77,7 +78,7 @@
   }
 
   &__num {
-    color: #666;
+    color: $gray-darker;
     font-size: 12px;
   }
 
diff --git a/packages/vant-css/src/cell-swipe.css b/packages/vant-css/src/cell-swipe.css
index 3233148a6..88d48cc74 100644
--- a/packages/vant-css/src/cell-swipe.css
+++ b/packages/vant-css/src/cell-swipe.css
@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 .van-cell-swipe {
   overflow: hidden;
   position: relative;
diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css
index 8b381dd41..2ceddb55d 100644
--- a/packages/vant-css/src/cell.css
+++ b/packages/vant-css/src/cell.css
@@ -1,38 +1,23 @@
 @import './common/var.css';
-@import './mixins/border_retina.css';
-@import './icon.css';
 
 .van-cell {
   width: 100%;
   display: table;
-  position: relative;
   padding: 10px 15px 10px 0;
   box-sizing: border-box;
   line-height: 24px;
-  background-color: $c-white;
-  color: $c-black;
+  background-color: $white;
+  color: $text-color;
   font-size: 14px;
-  text-decoration: none;
   overflow: hidden;
 
-  &::after {
-    @mixin border-retina (bottom);
-  }
-
-  &:last-child {
-    &::after {
-      border-bottom: 0;
-    }
+  &:not(:last-child)::after {
+    border-bottom-width: 1px;
   }
 
   &-group {
     padding-left: 15px;
-    position: relative;
-    background-color: #fff;
-
-    &::after {
-      @mixin border-retina (top, bottom);
-    }
+    background-color: $white;
   }
 
   &__title {
@@ -47,7 +32,7 @@
     display: block;
     font-size: 12px;
     line-height: 1.2;
-    color: $c-gray-darker;
+    color: $gray-darker;
   }
 
   &__value {
@@ -73,12 +58,7 @@
       position: absolute;
       left: -7px;
       font-size: 14px;
-      color: #f44;
-    }
-
-    .van-cell__title {
-      float: none;
-      display: inline-block;
+      color: $red;
     }
   }
 
@@ -87,7 +67,7 @@
     top: 50%;
     right: 15px;
     transform: translateY(-50%);
-    color: $c-gray-dark;
+    color: $gray-dark;
     font-size: 12px;
   }
 }
diff --git a/packages/vant-css/src/checkbox.css b/packages/vant-css/src/checkbox.css
index 063da3621..0ab575902 100644
--- a/packages/vant-css/src/checkbox.css
+++ b/packages/vant-css/src/checkbox.css
@@ -9,11 +9,11 @@
   }
 
   .van-icon-checked {
-    color: $c-green;
+    color: $green;
   }
 
   .van-icon-check {
-    color: $c-gray-dark;
+    color: $gray-dark;
   }
 
   &--disabled {
@@ -27,7 +27,6 @@
     height: 22px;
     margin-right: 15px;
     float: left;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
   &__control {
@@ -43,7 +42,6 @@
   &__label {
     line-height: 22px;
     margin-left: 37px;
-    display: block;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);      
+    display: block; 
   }
 }
diff --git a/packages/vant-css/src/col.css b/packages/vant-css/src/col.css
index a4b6d903b..247c37156 100644
--- a/packages/vant-css/src/col.css
+++ b/packages/vant-css/src/col.css
@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 .van-col {
   float: left;
   box-sizing: border-box;
diff --git a/packages/vant-css/src/common/hairline.css b/packages/vant-css/src/common/hairline.css
new file mode 100644
index 000000000..d68d84c37
--- /dev/null
+++ b/packages/vant-css/src/common/hairline.css
@@ -0,0 +1,41 @@
+@import "../mixins/border_retina.css";
+
+.van-hairline {
+  &,
+  &--top,
+  &--left,
+  &--right,
+  &--bottom,
+  &--top-bottom,
+  &--surround {
+    position: relative;
+
+    &::after {
+      @mixin hairline;
+    }
+  }
+
+  &--top::after {
+    border-top-width: 1px;
+  }
+
+  &--left::after {
+    border-left-width: 1px;
+  }
+
+  &--right::after {
+    border-right-width: 1px;
+  }
+
+  &--bottom::after {
+    border-bottom-width: 1px;
+  }
+
+  &--top-bottom::after {
+    border-width: 1px 0;
+  }
+
+  &--surround::after {
+    border-width: 1px;
+  }
+}
diff --git a/packages/vant-css/src/common/normalize.css b/packages/vant-css/src/common/normalize.css
new file mode 100644
index 000000000..5561d9e4b
--- /dev/null
+++ b/packages/vant-css/src/common/normalize.css
@@ -0,0 +1,27 @@
+/**
+ * 基本样式入口
+ */
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  text-decoration: none;
+}
+
+a,
+input,
+button,
+textarea {
+  &:focus {
+    outline: none;
+  }
+}
+
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/packages/vant-css/src/common/var.css b/packages/vant-css/src/common/var.css
index 61de30818..fe99eb4a0 100644
--- a/packages/vant-css/src/common/var.css
+++ b/packages/vant-css/src/common/var.css
@@ -1,41 +1,37 @@
-/* UI标准色 */
-$c-white: #fff;
-$c-black: #333;
-$c-green: #06bf04;
-$c-green-wx: #4b0;
-$c-red: #ed5050;
-$c-gray: #c9c9c9;
-$c-gray-light: #e5e5e5;
-$c-gray-darker: #666;
-$c-gray-dark: #999;
-$c-yellow: #f09000;
-$c-yellow-light: #fcff00;
-$c-orange: #f60;
-$c-orange-dark: #f15a0c;
-$c-blue: #38f;
-$c-active: #e8e8e8;
+/* color variables */
+$black: #000;
+$white: #fff;
+$red: #f44;
+$green: #06bf04;
+$green-wx: #4b0;
+$gray: #c9c9c9;
+$gray-light: #e5e5e5;
+$gray-darker: #666;
+$gray-dark: #999;
+$yellow: #f09000;
+$orange: #f60;
+$blue: #38f;
 
-$c-background: #f8f8f8;
+/* default colors */
+$text-color: #333;
+$border-color: #ccc;
+$active-color: #e8e8e8;
+$background-color: #f8f8f8;
 
-/* 按钮颜色 */
-$button-primary-color: $c-white;
-$button-primary-background-color: $c-green-wx;
+/* button */
+$button-primary-color: $white;
+$button-primary-background-color: $green-wx;
 $button-primary-border-color: #0a0;
-
-$button-default-color: $c-black;
-$button-default-background-color: $c-white;
-$button-default-border-color: #ccc;
-
-$button-danger-color: $c-white;
-$button-danger-background-color: #f44;
+$button-default-color: $text-color;
+$button-default-background-color: $white;
+$button-default-border-color: $border-color;
+$button-danger-color: $white;
+$button-danger-background-color: $red;
 $button-danger-border-color: #e33;
-
-$button-disabled-color: $c-gray-dark;
-$button-disabled-background-color: $c-gray-light;
+$button-disabled-color: $gray-dark;
+$button-disabled-background-color: $gray-light;
 $button-disabled-border-color: #cacaca;
-
-$bottom-action-button-default-color: $c-white;
+$bottom-action-button-default-color: $white;
 $bottom-action-button-default-background-color: #f85;
-
-$bottom-action-button-primary-color: $c-white;
-$bottom-action-button-primary-background-color: #f44;
+$bottom-action-button-primary-color: $white;
+$bottom-action-button-primary-background-color: $red;
diff --git a/packages/vant-css/src/deep-select.css b/packages/vant-css/src/deep-select.css
index 265484ef0..b2f4a3896 100644
--- a/packages/vant-css/src/deep-select.css
+++ b/packages/vant-css/src/deep-select.css
@@ -9,24 +9,23 @@
 
   &__nav {
     width: 143px;
-    /*float: left;*/
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     overflow: scroll;
-    background-color: $c-white;
+    background-color: $white;
     -webkit-overflow-scrolling: touch;
   }
 
   &__nitem {
     line-height: 44px;
     padding: 0 15px;
-    background-color: $c-white;
+    background-color: $white;
     @mixin multi-ellipsis 1;
 
     &--active {
-      background-color: $c-background;
+      background-color: $background-color;
     }
   }
 
@@ -52,7 +51,7 @@
   &__selected {
     float: right;
     position: absolute;
-    right: 0px;
+    right: 0;
     top: 0;
     bottom: 0;
   }
diff --git a/packages/vant-css/src/dialog.css b/packages/vant-css/src/dialog.css
index 5f76c401f..17f38489a 100644
--- a/packages/vant-css/src/dialog.css
+++ b/packages/vant-css/src/dialog.css
@@ -1,5 +1,4 @@
-@import './mixins/border_retina.css';
-@import './popup.css';
+@import './common/var.css';
 
 .van-dialog {
   position: fixed;
@@ -10,11 +9,9 @@
   overflow: hidden;
   transition: .2s;
   border-radius: 4px;
-  background-color: #fff;
-  backface-visibility: hidden;
+  background-color: $white;
   transform: translate3d(-50%, -50%, 0);
   
-
   &__header {
     padding: 15px 0 0;
     text-align: center;
@@ -22,10 +19,9 @@
 
   &__content {
     padding: 15px 20px;
-    position: relative;
 
     &::after {
-      @mixin border-retina (bottom);
+      border-bottom-width: 1px;
     }
   }
 
@@ -33,7 +29,7 @@
     line-height: 1.5;
 
     &--withtitle {
-      color: #999;
+      color: $gray-dark;
       font-size: 14px;
     }
   }
@@ -47,15 +43,6 @@
       .van-button {
         flex: 1;
       }
-
-      .van-dialog__cancel {
-        position: relative;
-
-        &::before {
-          @mixin border-retina (right);
-          left: -2px;
-        }
-      }
     }
   }
 
diff --git a/packages/vant-css/src/express-way.css b/packages/vant-css/src/express-way.css
index a0507b435..7fb9f6a0b 100644
--- a/packages/vant-css/src/express-way.css
+++ b/packages/vant-css/src/express-way.css
@@ -1,9 +1,11 @@
+@import './common/var.css';
+
 .van-express-way {
   padding: 0;
 
   &__fee,
   &__type {
-    color: #666;
+    color: $gray-darker;
     line-height: 1.5;
   }
 
@@ -35,7 +37,7 @@
       padding-left: 30px;
 
       p {
-        color: #999;
+        color: $gray-dark;
         font-size: 12px;
         line-height: 16px;
       }
@@ -52,7 +54,7 @@
     }
 
     &__warn {
-      color: #f09000;
+      color: $yellow;
     }
   }
 }
\ No newline at end of file
diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css
index 6bc7cac56..6d179f155 100644
--- a/packages/vant-css/src/field.css
+++ b/packages/vant-css/src/field.css
@@ -1,7 +1,4 @@
 @import './common/var.css';
-@import './mixins/border_retina.css';
-@import './cell.css';
-@import './icon.css';
 
 .van-field {
 
@@ -44,7 +41,7 @@
 
   &--disabled {
     .van-field__control {
-      color: $c-gray-dark;
+      color: $gray-dark;
     }
   }
 
@@ -52,7 +49,7 @@
     .van-field__control {
       &,
       &::placeholder {
-        color: $c-red;
+        color: $red;
       }
     }
   }
@@ -64,17 +61,12 @@
 
     &::after {
       border-radius: 2px;
-      @mixin border-retina (top, right, bottom, left);
-    }
-
-    &:last-child::after {
-      @mixin border-retina (bottom);
     }
   }
 
   &--autosize {
     .van-field__control {
-      min-height: 0px;
+      min-height: 0;
     }
   }
 
@@ -93,7 +85,6 @@
     display: block;
     width: 100%;
     resize: none;
-    outline: 0;
   }
 
   &__icon {
diff --git a/packages/vant-css/src/goods-action.css b/packages/vant-css/src/goods-action.css
index 5bb1ecdd3..ce80b3ce0 100644
--- a/packages/vant-css/src/goods-action.css
+++ b/packages/vant-css/src/goods-action.css
@@ -1,5 +1,4 @@
 @import './common/var.css';
-@import './mixins/border_retina.css';
 
 .van-goods-action {
   left: 0;
@@ -13,29 +12,26 @@
   }
 
   &__mini-btn {
-    color: #666;
+    color: $gray-darker;
     display: flex;
     height: 50px;
     font-size: 10px;
     min-width: 15%;
-    position: relative;
     text-align: center;
-    background-color: #fff;
+    background-color: $white;
     flex-direction: column;
     justify-content: center;
 
     &::after {
-      @mixin border-retina (top, left), #cacaca;
+      border-width: 1px 0 0 1px;
     }
 
-    &:first-child {
-      &::after {
-        border-left-width: 0;
-      }
+    &:first-child::after {
+      border-left-width: 0;
     }
 
     &:active {
-      background-color: $c-active;
+      background-color: $active-color;
     }
   }
 
diff --git a/packages/vant-css/src/image-preview.css b/packages/vant-css/src/image-preview.css
index 54fc36583..01fe3e673 100644
--- a/packages/vant-css/src/image-preview.css
+++ b/packages/vant-css/src/image-preview.css
@@ -1,4 +1,4 @@
-@import './swipe.css';
+@import './common/var.css';
 
 .van-image-preview {
   position: fixed;
@@ -9,7 +9,6 @@
   overflow: auto;
 
   &__image {
-    display: block;
     position: absolute;
     left: 0;
 
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index b5b47e545..af2da423d 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -3,6 +3,7 @@
  */
 
 /* base */
+@import './base.css';
 @import './reset.css';
 
 /* common components */
diff --git a/packages/vant-css/src/invalid-goods.css b/packages/vant-css/src/invalid-goods.css
index 83317b9d3..144e324fe 100644
--- a/packages/vant-css/src/invalid-goods.css
+++ b/packages/vant-css/src/invalid-goods.css
@@ -1,3 +1,4 @@
+@import './common/var.css';
 @import "./mixins/ellipsis.css";
 
 $van-invalid-goods-photo-size: 90px;
@@ -7,7 +8,7 @@ $van-invalid-goods-photo-size: 90px;
     margin: 10px 0;
 
     &__title {
-      color: #999;
+      color: $gray-dark;
       font-size: 12px;
       text-align: center;
       margin-bottom: 10px;
@@ -42,11 +43,11 @@ $van-invalid-goods-photo-size: 90px;
       top: 0;
       right: 0;
       width: 80px;
-      color: #666;
+      color: $gray-darker;
       font-size: 14px;
       padding-right: 8px;
       line-height: calc($van-invalid-goods-photo-size + 10px);
-      background-color: #fff;
+      background-color: $white;
       text-align: right;
 
       span {
@@ -62,7 +63,7 @@ $van-invalid-goods-photo-size: 90px;
   }
 
   &-invalid-goods-card {
-    color: #999;
+    color: $gray-dark;
     margin: 10px 0;
     padding: 5px 10px;
     background-color: #fafafa;
@@ -73,7 +74,7 @@ $van-invalid-goods-photo-size: 90px;
       left: 0;
       top: 70px;
       width: $van-invalid-goods-photo-size;
-      color: #fff;
+      color: $white;
       font-size: 12px;
       line-height: 20px;
       text-align: center;
@@ -108,14 +109,14 @@ $van-invalid-goods-photo-size: 90px;
     }
 
     &__desc {
-      color: #f60;
+      color: $orange;
       font-size: 12px;
       margin-top: 5px;
     }
   }
 
   .van-icon-arrow {
-    color: #666;
+    color: $gray-darker;
     font-size: 10px;
   }
 }
\ No newline at end of file
diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css
index 704897bf4..94288eeb3 100644
--- a/packages/vant-css/src/loading.css
+++ b/packages/vant-css/src/loading.css
@@ -36,8 +36,8 @@
       box-sizing: border-box;
 
       &.van-loading__spinner--black {
-        border-color: $c-gray;
-        border-top-color: $c-gray-darker;
+        border-color: $gray;
+        border-top-color: $gray-darker;
       }
 
       &.van-loading__spinner--white {
diff --git a/packages/vant-css/src/mixins/border_retina.css b/packages/vant-css/src/mixins/border_retina.css
index 404c323e5..9ba5bc238 100644
--- a/packages/vant-css/src/mixins/border_retina.css
+++ b/packages/vant-css/src/mixins/border_retina.css
@@ -1,20 +1,34 @@
+@import '../common/var.css';
+
 $border-poses: top, right, bottom, left;
 
-@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 {
+@define-mixin border-retina $poses: $border-poses, $border-retina-color: $gray-light {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
-  box-sizing: border-box;
   width: 200%;
   height: 200%;
   transform: scale(.5);
-  transform-origin: left top;
-  -webkit-perspective: 1000;
-  -webkit-backface-visibility: hidden;
+  transform-origin: 0 0;
   pointer-events: none;
+  box-sizing: border-box;
 
   @each $pos in $poses {
     border-$(pos): 1px solid $border-retina-color;
   }
+}
+
+@define-mixin hairline $border-retina-color: $gray-light {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 0 solid $border-retina-color;
 }
\ No newline at end of file
diff --git a/packages/vant-css/src/notice-bar.css b/packages/vant-css/src/notice-bar.css
index 67f912a1a..97710ca64 100644
--- a/packages/vant-css/src/notice-bar.css
+++ b/packages/vant-css/src/notice-bar.css
@@ -1,7 +1,7 @@
 @import './common/var.css';
 
 .van-notice-bar {
-  color: #f60;
+  color: $orange;
   padding: 9px 10px;
   font-size: 12px;
   line-height: 1.5;
diff --git a/packages/vant-css/src/order-coupon.css b/packages/vant-css/src/order-coupon.css
index 80f824c34..144e87802 100644
--- a/packages/vant-css/src/order-coupon.css
+++ b/packages/vant-css/src/order-coupon.css
@@ -1,10 +1,10 @@
-@import "./mixins/border_retina.css";
+@import './common/var.css';
 @import "./mixins/ellipsis.css";
 
 .van-order-coupon {
   &-list {
     height: 100%;
-    background-color: #f8f8f8;
+    background-color: $background-color;
 
     &__top {
       position: absolute;
@@ -13,10 +13,6 @@
       width: 100%;
       z-index: 1;
       box-sizing: border-box;
-
-      &::after {
-        border-top: none;
-      }
     }
 
     &__exchange {
@@ -34,7 +30,7 @@
       -webkit-overflow-scrolling: touch;
 
       h3 {
-        color: #999;
+        color: $gray-dark;
         margin: 15px 0;
         font-size: 14px;
         position: relative;
@@ -47,7 +43,7 @@
           height: 1px;
           top: 50%;
           position: absolute;
-          background-color: #e5e5e5;
+          background-color: $gray-light;
         }
 
         &::before {
@@ -74,11 +70,7 @@
       line-height: 45px;
       text-align: center;
       position: absolute;
-      background-color: #fff;
-
-      &::after {
-        @mixin border-retina (top);
-      }
+      background-color: $white;
     }
   }
 
@@ -102,7 +94,7 @@
 
     &__gradient {
       flex: 1;
-      color: #fff;
+      color: $white;
       display: flex;
       margin-left: -1px; /* hack for flex space */
       text-align: center;
@@ -134,7 +126,7 @@
       padding: 0 15px;
       overflow: hidden;
       position: relative;
-      background-color: #fff;
+      background-color: $white;
       flex-direction: column;
       justify-content: center;
       border-radius: 0 4px 4px 0;
@@ -146,7 +138,7 @@
 
       p,
       span {
-        color: #999;
+        color: $gray-dark;
         font-size: 12px;
         margin-top: 5px;
       }
@@ -168,13 +160,13 @@
       border-style: solid;
       border-width: 18px 19px;
       border-radius: 0 4px 0 0;
-      border-color: #f44 #f44 transparent transparent;
+      border-color: $red $red transparent transparent;
 
       .van-icon {
         position: absolute;
         top: -13px;
         right: -13px;
-        color: #fff;
+        color: $white;
         font-size: 12px;
         
         &::before {
diff --git a/packages/vant-css/src/order-goods.css b/packages/vant-css/src/order-goods.css
index b40500e16..1d3413585 100644
--- a/packages/vant-css/src/order-goods.css
+++ b/packages/vant-css/src/order-goods.css
@@ -1,17 +1,15 @@
-@import "./mixins/border_retina.css";
+@import './common/var.css';
 
 .van-order-goods {
-  background-color: #fff;
+  background-color: $white;
 
   &-card {
     margin-left: -15px;
-    position: relative;
     background-color: #fafafa;
 
-    &:not(:first-child),
-    &__delivery {
+    &:not(:first-child) {
       &::after {
-        @mixin border-retina (top);
+        border-top-width: 1px;
       }
     }
 
@@ -29,14 +27,14 @@
     }
 
     &__tag-green {
-      color: #fff;
-      background-color: #4b0;
+      color: $white;
+      background-color: $green-wx;
     }
 
     &__tag-red {
-      color: #ed5050;
+      color: $gray;
       padding: 5px 8px;
-      border: 1px solid #ed5050;
+      border: 1px solid $gray;
     }
 
     &__delivery {
@@ -44,7 +42,7 @@
       background-color: transparent;
 
       .van-cell__value {
-        color: #666;
+        color: $gray-darker;
       }
     }
 
@@ -76,17 +74,17 @@
     &__message {
       width: 100%;
       height: 100%;
-      background-color: #f8f8f8;
+      background-color: $background-color;
 
       h2 {
-        color: #999;
+        color: $gray-dark;
         font-size: 12px;
         line-height: 18px;
         padding: 5px 0 5px 10px;
       }
 
       ul {
-        background-color: #fff;
+        background-color: $white;
       }
 
       p,
@@ -107,10 +105,9 @@
       li {
         display: flex;
         padding: 0 10px;
-        position: relative;
 
         &:not(:last-child)::after {
-          @mixin border-retina (bottom);
+          border-bottom-width: 1px;
         }
 
         img {
@@ -124,14 +121,9 @@
   &-empty {
     margin-left: -15px;
     text-align: center;
-    position: relative;
-
-    &::after {
-      @mixin border-retina (top);
-    }
 
     p {
-      color: #999;
+      color: $gray-dark;
       padding: 0 10px;
       font-size: 14px;
       line-height: 20px;
@@ -148,7 +140,7 @@
       margin: 15px 0;
       padding: 0 10px;
       line-height: 39px;
-      border-color: #e5e5e5;
+      border-color: $gray-light;
     }
   }
 
@@ -167,7 +159,7 @@
     }
 
     a {
-      color: #333;
+      color: $text-color;
       font-size: 14px;
     }
 
@@ -179,13 +171,12 @@
 
   &-message {
     textarea {
-      color: #666;
+      color: $gray-darker;
       padding: 0;
       width: 100%;
       height: 22px;
       border: none;
       resize: none;
-      outline: none;
       display: block;
       font-size: 14px;
       line-height: 22px;
@@ -197,7 +188,7 @@
     }
 
     p {
-      color: #666;
+      color: $gray-darker;
       text-align: left;
     }
 
@@ -208,7 +199,7 @@
 
   &-price {
     .van-cell__value {
-      color: #f44;
+      color: $red;
     }
   }
 }
diff --git a/packages/vant-css/src/panel.css b/packages/vant-css/src/panel.css
index 94f089196..0a5857ab0 100644
--- a/packages/vant-css/src/panel.css
+++ b/packages/vant-css/src/panel.css
@@ -1,29 +1,20 @@
-@import './mixins/border_retina.css';
+@import './common/var.css';
 
 .van-panel {
-  background: #fff;
-  position: relative;
-
-  &::after {
-    @mixin border-retina (top, bottom);
-  }
+  background: $white;
 
   &__header {
     padding: 10px 15px;
-    position: relative;
-    &::after {
-      @mixin border-retina (bottom);
-    }
   }
 
   &__title {
     font-size: 14px;
-    color: #333;
+    color: $text-color;
   }
 
   &__desc {
     font-size: 12px;
-    color: #666;
+    color: $gray-darker;
   }
 
   &__status {
@@ -31,15 +22,10 @@
     position: absolute;
     top: 10px;
     right: 15px;
-    color: #FF4444;
+    color: $red;
   }
 
   &__footer {
     padding: 10px 15px;
-    position: relative;
-
-    &::after {
-      @mixin border-retina (top);
-    }
   }
 }
diff --git a/packages/vant-css/src/pay-order.css b/packages/vant-css/src/pay-order.css
index f674c6f04..dca923ad6 100644
--- a/packages/vant-css/src/pay-order.css
+++ b/packages/vant-css/src/pay-order.css
@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 .van-pay-order {
   left: 0;
   bottom: 0;
@@ -7,7 +9,7 @@
   user-select: none;
 
   &__tip {
-    color: #f60;
+    color: $orange;
     font-size: 12px;
     line-height: 18px;
     padding: 10px 10px;
@@ -18,7 +20,7 @@
     height: 50px;
     display: flex;
     line-height: 50px;
-    background-color: #fff;
+    background-color: $white;
   }
 
   &__price {
@@ -28,17 +30,17 @@
   }
 
   &__price-text {
-    color: #666;
+    color: $gray-darker;
     font-size: 16px;
   }
 
   &__price-interger {
-    color: #f44;
+    color: $red;
     font-size: 16px;
   }
 
   &__price-decimal {
-    color: #f44;
+    color: $red;
     font-size: 12px;
   }
 
diff --git a/packages/vant-css/src/picker.css b/packages/vant-css/src/picker.css
index f84b14390..c5acbf21e 100644
--- a/packages/vant-css/src/picker.css
+++ b/packages/vant-css/src/picker.css
@@ -1,19 +1,14 @@
-@import './mixins/border_retina.css';
+@import './common/var.css';
 
 .van-picker {
   overflow: hidden;
-  background-color: #fff;
+  background-color: $white;
 
   &__toolbar {
     height: 40px;
     line-height: 40px;
     overflow: hidden;
     padding: 0 15px;
-    position: relative;
-
-    &::after {
-      @mixin border-retina (top, bottom);
-    }
   }
 
   &__cancel {
@@ -129,11 +124,9 @@
       width: 100%;
       box-sizing: border-box;
       transition-duration: .3s;
-      backface-visibility: hidden;
 
       &--selected {
-        color: #000;
-        transform: translate3d(0, 0, 0) rotateX(0);
+        color: $black;
       }
     }
   }
@@ -141,7 +134,6 @@
   .picker-column-wrapper {
     transition-duration: 0.3s;
     transition-timing-function: ease-out;
-    backface-visibility: hidden;
   }
 
   .picker-column-wrapper.dragging,
diff --git a/packages/vant-css/src/popup.css b/packages/vant-css/src/popup.css
index 1856cd50f..85a2c3201 100644
--- a/packages/vant-css/src/popup.css
+++ b/packages/vant-css/src/popup.css
@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 .van {
   &-modal {
     position: fixed;
@@ -5,17 +7,16 @@
     height: 100%;
     top: 0;
     left: 0;
-    background-color: rgba(0, 0, 0, 0.701961);
-    transition: all .5s ease-out;
+    background-color: rgba(0, 0, 0, 0.7);
+    transition: .5s ease-out;
   }
 
   &-popup {
     position: fixed;
-    background-color: #fff;
+    background-color: $white;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);
-    backface-visibility: hidden;
     transition: .2s ease-out;
 
     &--top {
diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css
index 645d7db64..eebbdba6f 100644
--- a/packages/vant-css/src/progress.css
+++ b/packages/vant-css/src/progress.css
@@ -4,7 +4,7 @@
   height: 4px;
   position: relative;
   border-radius: 4px;
-  background: $c-gray-light;
+  background: $gray-light;
 
   &__portion {
     left: 0;
@@ -22,6 +22,6 @@
     border-radius: 6px;
     line-height: 12px;
     text-align: center;
-    background-color: $c-gray-light;
+    background-color: $gray-light;
   }
 }
diff --git a/packages/vant-css/src/quantity.css b/packages/vant-css/src/quantity.css
index 7a622652f..83ea64ef0 100644
--- a/packages/vant-css/src/quantity.css
+++ b/packages/vant-css/src/quantity.css
@@ -7,7 +7,7 @@
     .van-quantity__input,
     .van-quantity__minus,
     .van-quantity__plus {
-      border-color: #e8e8e8;
+      border-color: $active-color;
     }
   }
 
@@ -15,10 +15,9 @@
     width: 40px;
     height: 30px;
     box-sizing: border-box;
-    background-color: $c-white;
-    border: 1px solid $c-gray-dark;
+    background-color: $white;
+    border: 1px solid $border-color;
     position: relative;
-    outline: 0;
     padding: 5px;
     vertical-align: middle;
 
@@ -53,8 +52,8 @@
     }
 
     &--disabled {
-      background-color: #f8f8f8;
-      border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8;
+      background-color: $background-color;
+      border-color: $active-color $border-color $active-color $active-color;
     }
   }
 
@@ -62,8 +61,8 @@
     border-radius: 0 2px 2px 0;
 
     &--disabled {
-      background-color: #f8f8f8;
-      border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999;
+      background-color: $background-color;
+      border-color: $active-color $active-color $active-color $border-color;
     }
   }
 
@@ -71,13 +70,12 @@
     width: 33px;
     height: 26px;
     padding: 1px;
-    border: 1px solid $c-gray-dark;
+    border: 1px solid $border-color;
     border-width: 1px 0;
     border-radius: 0;
     box-sizing: content-box;
-    color: $c-gray-darker;
+    color: $gray-darker;
     font-size: 14px;
-    outline: 0;
     vertical-align: middle;
     text-align: center;
     -webkit-appearance: none;
diff --git a/packages/vant-css/src/radio.css b/packages/vant-css/src/radio.css
index f69c15833..f03a6dba7 100644
--- a/packages/vant-css/src/radio.css
+++ b/packages/vant-css/src/radio.css
@@ -7,7 +7,6 @@
     position: relative;
     height: 22px;
     float: left;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
   &__control {
@@ -24,7 +23,6 @@
     line-height: 22px;
     display: block;
     margin-left: 37px;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
   .van-icon {
@@ -33,11 +31,11 @@
   }
 
   .van-icon-checked {
-    color: $c-green;
+    color: $green;
   }
 
   .van-icon-check {
-    color: $c-gray-dark;
+    color: $gray-dark;
   }
 
   &--disabled {
diff --git a/packages/vant-css/src/reset.css b/packages/vant-css/src/reset.css
index 5ed0557a0..9a3192d92 100644
--- a/packages/vant-css/src/reset.css
+++ b/packages/vant-css/src/reset.css
@@ -8,7 +8,8 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
 }
 
 html {
-    line-height: 1
+    line-height: 1;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 ol, ul {
@@ -48,15 +49,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 
 body {
   font-family: Arial, Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma, sans-serif;
-	color: #333;
-	background-color: #f8f8f8;
-	-webkit-backface-visibility: hidden;
+	color: $text-color;
+	background-color: $background-color;
 }
 
 a {
   background: transparent;
   text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 button,
@@ -65,7 +64,6 @@ select,
 textarea {
   font-family: inherit;
   margin: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-appearance: none;
       -moz-appearance: none;
 }
diff --git a/packages/vant-css/src/row.css b/packages/vant-css/src/row.css
index d31edb8af..8de86ca31 100644
--- a/packages/vant-css/src/row.css
+++ b/packages/vant-css/src/row.css
@@ -1,8 +1,9 @@
+@import './common/var.css';
+
 .van-row {
   &:after {
     content: "";
     display: table;
     clear: both;
   }
-  zoom: 1;
 }
diff --git a/packages/vant-css/src/search.css b/packages/vant-css/src/search.css
index 4961963fd..4c816f9d2 100644
--- a/packages/vant-css/src/search.css
+++ b/packages/vant-css/src/search.css
@@ -1,5 +1,4 @@
 @import './common/var.css';
-@import './icon.css';
 
 .van-search {
   position: relative;
@@ -13,19 +12,19 @@
 
   &--showcase {
     padding: 10px;
-    background-color: #f8f8f8;
+    background-color: $background-color;
 
     .van-search__input-wrap {
-      border-color: $c-gray-light;
+      border-color: $gray-light;
     }
   }
 
   &__input-wrap {
     position: relative;
     padding: 8px 24px 8px 35px;
-    border: 1px solid $c-gray-light;
+    border: 1px solid $gray-light;
     border-radius: 4px;
-    background-color: $c-white;
+    background-color: $white;
   }
 
   &__input {
@@ -33,10 +32,8 @@
     width: 100%;
     height: 14px;
     font-size: 14px;
-    color: $c-gray-dark;
+    color: $gray-dark;
     border: none;
-    outline: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
   &__cancel {
@@ -46,11 +43,11 @@
     top: 0;
     right: 10px;
     font-size: 14px;
-    color: $c-green;
+    color: $green;
   }
 
   .van-icon-search {
-    color: $c-gray-darker;
+    color: $gray-darker;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
diff --git a/packages/vant-css/src/steps.css b/packages/vant-css/src/steps.css
index ec9683fa4..d9219fba1 100644
--- a/packages/vant-css/src/steps.css
+++ b/packages/vant-css/src/steps.css
@@ -1,11 +1,9 @@
 @import './common/var.css';
 @import './mixins/ellipsis.css';
-@import './icon.css';
-@import './mixins/border_retina.css';
 
 .van-steps {
   overflow: hidden;
-  background-color: #fff;
+  background-color: $white;
 
   &--horizontal {
     padding: 0 10px;
@@ -61,13 +59,13 @@
 
   &__title {
     font-size: 14px;
-    color: $c-black;
+    color: $text-color;
   }
 
   &__desc {
     font-size: 12px;
     line-height: 1.5;
-    color: $c-gray-dark;
+    color: $gray-dark;
     max-height: 18px;
     @mixin multi-ellipsis 1;
   }
@@ -76,7 +74,7 @@
 .van-step {
   font-size: 14px;
   position: relative;
-  color: $c-gray-dark;
+  color: $gray-dark;
   
   &--horizontal {
     float: left;
@@ -113,7 +111,7 @@
       top: 28px;
       left: -8px;
       padding: 0 8px;
-      background-color: #fff;
+      background-color: $white;
       z-index: 1;
     }
 
@@ -130,20 +128,20 @@
       top: 30px;
       width: 100%;
       height: 1px;
-      background-color: $c-gray-light;
+      background-color: $gray-light;
     }
 
     &.van-step--finish {
-      color: $c-black;
+      color: $text-color;
 
       .van-step__circle,
       .van-step__line {
-        background-color: $c-green;
+        background-color: $green;
       }
     }
 
     &.van-step--process {
-      color: $c-black;
+      color: $text-color;
 
       .van-step__circle-container {
         top: 24px;
@@ -151,7 +149,7 @@
 
       .van-icon {
         font-size: 12px;
-        color: $c-green;
+        color: $green;
         line-height: 1;
         display: block;
       }
@@ -173,8 +171,8 @@
     line-height: 18px;
     padding: 10px 10px 10px 0;
 
-    &::after {
-      @mixin border-retina (bottom);
+    &:not(:last-child)::after {
+      border-bottom-width: 1px;
     }
 
     &:first-child {
@@ -183,17 +181,13 @@
         position: absolute;
         width: 1px;
         height: 20px;
-        background-color: #fff;
+        background-color: $white;
         top: 0;
         left: -15px;
         z-index: 1;
       }
     }
 
-    &:last-child::after {
-      display: none;
-    }
-
     .van-step__circle-container > i {
       position: absolute;
       z-index: 2;
@@ -217,7 +211,7 @@
       left: -15px;
       width: 1px;
       height: 100%;
-      background-color: $c-gray-light;
+      background-color: $gray-light;
     }
   }
 }
diff --git a/packages/vant-css/src/swipe.css b/packages/vant-css/src/swipe.css
index c0b854931..d2ce57373 100644
--- a/packages/vant-css/src/swipe.css
+++ b/packages/vant-css/src/swipe.css
@@ -18,13 +18,13 @@
     height: 5px;
     display: inline-block;
     border-radius: 100%;
-    background: #999;
+    background: $gray-dark;
     opacity: .8;
     margin: 0 3px;
     z-index: 1;
 
     &--active {
-      background: $c-orange;
+      background: $orange;
       opacity: 1;
     }
   }
diff --git a/packages/vant-css/src/switch-cell.css b/packages/vant-css/src/switch-cell.css
index 7edabe8bd..bd8ee1d62 100644
--- a/packages/vant-css/src/switch-cell.css
+++ b/packages/vant-css/src/switch-cell.css
@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 .van-switch-cell {
   .van-cell__title {
     vertical-align: middle;
diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css
index ccd2ca1f4..73c9c9c3f 100644
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@@ -1,31 +1,29 @@
-@import './mixins/border_retina.css';
+@import './common/var.css';
 
 .van-switch {
   height: 31px;
   width: 51px;
   display: inline-block;
   position: relative;
-  background: #fff;
+  background: $white;
   border-radius: 16px;
-  &::after{
-    @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
-    border-width: 3px;
-    border-radius: 32px;
-  }
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-radius: 32px;
 
   &__node {
-    width: 28px;
-    height: 28px;
+    width: 30px;
+    height: 30px;
     border-radius: 13.5px;
-    background-color: #fff;
+    background-color: $white;
     position: absolute;
     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);
-    left: 1px;
-    top: 1px;
+    left: 0;
+    top: 0;
     z-index: 2;
     transition: transform .3s;
+
     &::after {
-      @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
+      border-color: rgba(0, 0, 0, .1);
       border-radius: 27px;
     }
   }
@@ -42,14 +40,18 @@
 
   &--on {
     background-color: #44db5e;
-    &::after { border-color: #44db5e; }
+
+    &::after {
+      border-color: #44db5e;
+    }
+
     .van-switch__node {
-      transform: translateX(20px);
+      transform: translateX(21px);
     }
   }
 
   &--off {
-    background-color: #fff;
+    background-color: $white;
     border-color: rgba(0, 0, 0, .1);
   }
 
diff --git a/packages/vant-css/src/tab.css b/packages/vant-css/src/tab.css
index e4084383c..6edef8c47 100644
--- a/packages/vant-css/src/tab.css
+++ b/packages/vant-css/src/tab.css
@@ -1,5 +1,4 @@
 @import './common/var.css';
-@import './mixins/border_retina.css';
 
 .van-tabs {
   position: relative;
@@ -32,7 +31,7 @@
 
       .van-tab {
         &::after {
-          @mixin border-retina (top, bottom);
+          border-width: 1px 0;
         }
       }
     }
@@ -40,23 +39,23 @@
     &--card {
       height: 28px;
       margin: 0 15px;
-      background-color: $c-white;
+      background-color: $white;
       border-radius: 2px;
-      border: 1px solid #666666;
+      border: 1px solid $gray-darker;
       overflow: hidden;
 
       .van-tab {
-        color: #666;
+        color: $gray-darker;
         line-height: 28px;
-        border-right: 1px solid #666;
+        border-right: 1px solid $gray-darker;
 
         &:last-child {
           border-right: none;
         }
 
         &.van-tab--active {
-          background-color: #666;
-          color: $c-white;
+          background-color: $gray-darker;
+          color: $white;
         }
       }
     }
@@ -76,18 +75,17 @@
 
 .van-tab {
   position: relative;
-  color: $c-black;
-  background-color: $c-white;
+  color: $text-color;
+  background-color: $white;
   font-size: 14px;
   line-height: 44px;
   box-sizing: border-box;
   cursor: pointer;
   text-align: center;
   flex: 1;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
 
   &--active {
-    color: #FF4444;
+    color: $red;
   }
 
   &__pane {
@@ -98,19 +96,3 @@
     }
   }
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/vant-css/src/tag.css b/packages/vant-css/src/tag.css
index 17450ec75..0973c087e 100644
--- a/packages/vant-css/src/tag.css
+++ b/packages/vant-css/src/tag.css
@@ -1,24 +1,22 @@
 @import './common/var.css';
-@import './mixins/border_retina.css';
 
 .van-tag {
-  position: relative;
   display: inline-block;
   line-height: 14px;
   padding: 1px 5px;
   border-radius: 2px;
   font-size: 10px;
-  background: $c-gray;
-  color: $c-white;
+  background: $gray;
+  color: $white;
 
   &::after {
-    @mixin border-retina (top, right, bottom, left), $c-gray;
+    border-color: $gray;
     border-radius: 4px;
   }
 
   &.is-plain {
-    background: $c-white;
-    color: $c-gray;
+    background: $white;
+    color: $gray;
   }
 
   &.is-mark {
@@ -30,14 +28,14 @@
   }
 
   &--success {
-    background: $c-green;
+    background: $green;
 
     &::after {
-      border-color: $c-green;
+      border-color: $green;
     }
 
     &.is-plain {
-      color: $c-green;
+      color: $green;
     }
   }
 
@@ -54,14 +52,14 @@
   }
 
   &--primary {
-    background: $c-blue;
+    background: $blue;
 
     &::after {
-      border-color: $c-blue;
+      border-color: $blue;
     }
 
     &.is-plain {
-      color: $c-blue;
+      color: $blue;
     }
   }
 }
diff --git a/packages/vant-css/src/toast.css b/packages/vant-css/src/toast.css
index 8fcbf808a..03349bb48 100644
--- a/packages/vant-css/src/toast.css
+++ b/packages/vant-css/src/toast.css
@@ -4,23 +4,26 @@
   position: fixed;
   z-index: 3001;
   border-radius: 5px;
-  background-color: #272727;
-  opacity: .7;
+  background-color: rgb(39, 39, 39, .7);
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
   font-size: 12px;
-  color: $c-white;
+  color: $white;
   text-align: center;
   line-height: 12px;
 
+  &-wrapper {
+    transition: opacity .2s;
+  }
+
   &__overlay {
     position: fixed;
     left: 0;
     top: 0;
     background: transparent;
-    height: 100vh;
-    width: 100vh;
+    height: 100%;
+    width: 100%;
     z-index: 3000;
   }
 
@@ -28,7 +31,7 @@
     padding: 45px;
   }
 
-  &--text, html {
+  &--text {
     padding: 12px;
     min-width: 200px;
   }
@@ -50,9 +53,6 @@
   }
 }
 
-.van-toast-fade-enter-active, .van-toast-fade-leave-active {
-  transition: opacity .2s;
-}
 .van-toast-fade-enter, .van-toast-fade-leave-to {
   opacity: 0;
 }
diff --git a/packages/vant-css/src/uploader.css b/packages/vant-css/src/uploader.css
index 26add94f9..7847fa667 100644
--- a/packages/vant-css/src/uploader.css
+++ b/packages/vant-css/src/uploader.css
@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 .van-uploader {
   position: relative;
   display: inline-block;
@@ -8,14 +10,13 @@
     right: 0;
     bottom: 0;
     left: 0;
-    display: block;
     width: 100%;
     height: 100%;
     opacity: 0;
-    cursor:pointer;
+    cursor: pointer;
   }
 
   input[type="file" i]::-webkit-file-upload-button {
-    cursor:pointer;
+    cursor: pointer;
   }
 }