vant-css: use hairline classes instead of mixins

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;
+  }
+}

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;
+}

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;