[breaking change] rebuild style struct (#2021)

packages/actionsheet/demo/index.vue

@@ -81,7 +81,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-actionsheet {
   .van-button {
     margin-left: 15px;

packages/actionsheet/index.less

@@ -1,18 +1,18 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-actionsheet {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
-  color: $text-color;
+  color: @text-color;
   max-height: 90%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: $background-color;
+  background-color: @background-color;
 
   &--withtitle {
-    background-color: $white;
+    background-color: @white;
   }
 
   &__item,
@@ -21,24 +21,24 @@
     line-height: 50px;
     font-size: 16px;
     text-align: center;
-    background-color: $white;
+    background-color: @white;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
   &__item--disabled {
-    color: $gray;
+    color: @gray;
 
     &:active {
-      background-color: $white;
+      background-color: @white;
     }
   }
 
   &__subname {
     font-size: 12px;
-    color: $gray-darker;
+    color: @gray-darker;
     margin-left: 5px;
   }
 
@@ -60,7 +60,7 @@
       right: 0;
       padding: 0 15px;
       font-size: 18px;
-      color: $gray-dark;
+      color: @gray-dark;
       position: absolute;
       line-height: inherit;
     }

packages/address-edit/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-address-edit {
   &__buttons {
@@ -27,7 +27,7 @@
     padding: 0;
 
     &__finish {
-      color: $blue;
+      color: @blue;
       font-size: 12px;
       display: block;
     }

packages/address-list/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-address-list {
   height: 100%;
@@ -13,7 +13,7 @@
   }
 
   &__disabled-text {
-    color: $gray-dark;
+    color: @gray-dark;
     padding: 0 15px;
     font-size: 12px;
     line-height: 30px;
@@ -24,7 +24,7 @@
   padding: 15px;
 
   .van-cell__value {
-    color: $text-color;
+    color: @text-color;
     padding-right: 34px;
     position: relative;
   }
@@ -45,7 +45,7 @@
   }
 
   .van-icon-checked {
-    color: $red;
+    color: @red;
   }
 
   &__name {
@@ -58,7 +58,7 @@
   &__address {
     font-size: 12px;
     line-height: 16px;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &--unswitchable {
@@ -74,7 +74,7 @@
   &--disabled {
     .van-address-item__name,
     .van-address-item__address {
-      color: $gray-dark;
+      color: @gray-dark;
     }
   }
 

packages/badge-group/index.less

@@ -0,0 +1,5 @@
+@import '../style/var';
+
+.badge-group {
+  width: 85px;
+}

packages/badge/demo/index.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-badge {
   .van-badge-group {
     width: auto;

packages/badge/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-badge {
   display: block;
@@ -6,29 +6,25 @@
   font-size: 14px;
   line-height: 1.4;
   user-select: none;
-  color: $gray-darker;
+  color: @gray-darker;
   word-break: break-all;
   box-sizing: border-box;
   padding: 20px 12px 20px 9px;
-  background-color: $background-color;
+  background-color: @background-color;
   border-left: 3px solid transparent;
 
   &:active {
-    background-color: $active-color;
+    background-color: @active-color;
   }
 
   &:not(:last-child)::after {
     border-bottom-width: 1px;
   }
 
-  &-group {
-    width: 85px;
-  }
-
   &--select {
     font-weight: 500;
-    color: $text-color;
-    border-color: $red;
+    color: @text-color;
+    border-color: @red;
 
     &::after {
       border-right-width: 1px;
@@ -36,7 +32,7 @@
 
     &,
     &:active {
-      background-color: $white;
+      background-color: @white;
     }
   }
 

packages/button/demo/index.vue

@@ -79,7 +79,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-button {
   .van-button {
     user-select: none;

packages/button/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-button {
   position: relative;
@@ -22,8 +22,8 @@
     width: 100%;
     height: 100%;
     border: inherit;
-    border-color: $black;
-    background-color: $black;
+    border-color: @black;
+    background-color: @black;
     border-radius: inherit; /* inherit parent's border radius */
     transform: translate(-50%, -50%);
   }
@@ -37,42 +37,42 @@
   }
 
   &--default {
-    color: $button-default-color;
-    background-color: $button-default-background-color;
-    border: 1px solid $button-default-border-color;
+    color: @button-default-color;
+    background-color: @button-default-background-color;
+    border: 1px solid @button-default-border-color;
   }
 
   &--primary {
-    color: $button-primary-color;
-    background-color: $button-primary-background-color;
-    border: 1px solid $button-primary-border-color;
+    color: @button-primary-color;
+    background-color: @button-primary-background-color;
+    border: 1px solid @button-primary-border-color;
   }
 
   &--danger {
-    color: $button-danger-color;
-    background-color: $button-danger-background-color;
-    border: 1px solid $button-danger-border-color;
+    color: @button-danger-color;
+    background-color: @button-danger-background-color;
+    border: 1px solid @button-danger-border-color;
   }
 
   &--warning {
-    color: $button-warning-color;
-    background-color: $button-warning-background-color;
-    border: 1px solid $button-warning-border-color;
+    color: @button-warning-color;
+    background-color: @button-warning-background-color;
+    border: 1px solid @button-warning-border-color;
   }
 
   &--plain {
-    background-color: $white;
+    background-color: @white;
 
     &.van-button--primary {
-      color: $button-primary-background-color;
+      color: @button-primary-background-color;
     }
 
     &.van-button--danger {
-      color: $button-danger-background-color;
+      color: @button-danger-background-color;
     }
 
     &.van-button--warning {
-      color: $button-warning-background-color;
+      color: @button-warning-background-color;
     }
   }
 
@@ -126,11 +126,11 @@
     border: 0;
     border-radius: 0;
     font-size: 16px;
-    color: $button-bottom-action-default-color;
-    background-color: $button-bottom-action-default-background-color;
+    color: @button-bottom-action-default-color;
+    background-color: @button-bottom-action-default-background-color;
 
     &.van-button--primary {
-      background-color: $button-bottom-action-primary-background-color;
+      background-color: @button-bottom-action-primary-background-color;
     }
   }
 

packages/card/index.less

@@ -1,14 +1,14 @@
-@import './common/var.css';
-@import './mixins/ellipsis.css';
+@import '../style/var';
+@import '../style/mixins/ellipsis';
 
 .van-card {
-  color: $text-color;
+  color: @text-color;
   height: 100px;
   font-size: 12px;
   position: relative;
   box-sizing: border-box;
   padding: 5px 15px 5px 115px;
-  background-color: $background-color-light;
+  background-color: @background-color-light;
 
   &:not(:first-child) {
     margin-top: 10px;
@@ -53,11 +53,11 @@
   &__title {
     max-height: 40px;
 
-    @include multi-ellipsis(2);
+    .multi-ellipsis(2);
   }
 
   &__desc {
-    color: $gray-darker;
+    color: @gray-darker;
     max-height: 20px;
   }
 
@@ -74,12 +74,12 @@
   }
 
   &__origin-price {
-    color: $gray-darker;
+    color: @gray-darker;
     text-decoration: line-through;
   }
 
   &__num {
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &__tag {

packages/cell-group/index.less

@@ -0,0 +1,5 @@
+@import '../style/var';
+
+.van-cell-group {
+  background-color: @white;
+}

packages/cell/demo/index.vue

@@ -63,7 +63,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-cell {
   .van-cell-text {
     margin-right: 5px;

packages/cell/index.less

@@ -1,5 +1,5 @@
-@import './common/var.css';
-@import "./mixins/hairline.css";
+@import '../style/var';
+@import "../style/mixins/hairline";
 
 .van-cell {
   width: 100%;
@@ -8,27 +8,23 @@
   box-sizing: border-box;
   line-height: 24px;
   position: relative;
-  background-color: $white;
-  color: $text-color;
+  background-color: @white;
+  color: @text-color;
   font-size: 14px;
   overflow: hidden;
 
   &:not(:last-child)::after {
-    @include hairline-bottom($border-color, 15px);
+    .hairline-bottom(@border-color, 15px);
   }
 
   &--borderless::after {
     display: none;
   }
 
-  &-group {
-    background-color: $white;
-  }
-
   &__label {
     font-size: 12px;
     line-height: 1.2;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &__title,
@@ -55,7 +51,7 @@
   }
 
   &__right-icon {
-    color: $gray-dark;
+    color: @gray-dark;
     font-size: 12px;
     line-height: 24px;
     margin-left: 5px;
@@ -75,7 +71,7 @@
 
   &--clickable {
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -87,7 +83,7 @@
       position: absolute;
       left: 7px;
       font-size: 14px;
-      color: $red;
+      color: @red;
     }
   }
 

packages/checkbox/demo/index.vue

@@ -108,7 +108,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-checkbox {
   .van-checkbox {
     margin: 10px 0 0 20px;

packages/checkbox/index.less

@@ -1,6 +1,4 @@
-@import './common/var.css';
-
-$van-checkbox-size: 20px;
+@import '../style/var';
 
 .van-checkbox {
   overflow: hidden;
@@ -10,7 +8,7 @@ $van-checkbox-size: 20px;
   &__label {
     display: inline-block;
     vertical-align: middle;
-    line-height: $van-checkbox-size;
+    line-height: @van-checkbox-size;
   }
 
   &__icon {
@@ -19,9 +17,9 @@ $van-checkbox-size: 20px;
       color: transparent;
       text-align: center;
       line-height: inherit;
-      border: 1px solid $gray-light;
-      width: $van-checkbox-size;
-      height: $van-checkbox-size;
+      border: 1px solid @gray-light;
+      width: @van-checkbox-size;
+      height: @van-checkbox-size;
       box-sizing: border-box;
       transition: .2s;
     }
@@ -34,24 +32,24 @@ $van-checkbox-size: 20px;
 
     &--checked {
       .van-icon {
-        color: $white;
-        border-color: $blue;
-        background-color: $blue;
+        color: @white;
+        border-color: @blue;
+        background-color: @blue;
       }
     }
 
     &--disabled {
       .van-icon {
-        color: $background-color;
-        border-color: $border-color;
+        color: @background-color;
+        border-color: @border-color;
         background-color: currentColor;
       }
     }
 
     &--disabled&--checked {
       .van-icon {
-        border-color: $border-color;
-        background-color: $border-color;
+        border-color: @border-color;
+        background-color: @border-color;
       }
     }
   }

packages/circle/demo/index.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-circle {
   .van-circle {
     margin-left: 15px;

packages/circle/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-circle {
   position: relative;
@@ -26,7 +26,7 @@
     top: 50%;
     left: 0;
     width: 100%;
-    color: $text-color;
+    color: @text-color;
     position: absolute;
     transform: translateY(-50%);
   }

packages/col/demo/index.vue

@@ -74,7 +74,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-col {
   .van-doc-demo-block {
     padding: 0 15px;

packages/col/index.less

@@ -0,0 +1,13 @@
+@import '../style/var';
+
+.van-col {
+  float: left;
+  box-sizing: border-box;
+}
+
+.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; }
+  .generate-col(@n, (@i + 1));
+}

packages/collapse-item/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-collapse-item {
   &__title {
@@ -24,11 +24,11 @@
     &--disabled {
       &,
       & .van-cell__right-icon {
-        color: $gray;
+        color: @gray;
       }
 
       &:active {
-        background-color: $white;
+        background-color: @white;
       }
     }
   }
@@ -41,6 +41,6 @@
 
   &__content {
     padding: 15px;
-    background-color: $white;
+    background-color: @white;
   }
 }

packages/collapse/demo/index.vue

@@ -65,18 +65,18 @@ export default {
 };
 </script>
 
-<style lang="postcss">
-@import "../../../packages/vant-css/src/common/var.css";
+<style lang="less">
+@import "../../../packages/style/var";
 
 .demo-collapse {
   .van-collapse-item__content {
     font-size: 13px;
     line-height: 1.5;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   .van-icon-question {
-    color: $blue;
+    color: @blue;
     vertical-align: -3px;
     margin-left: 5px;
     font-size: 15px;

packages/contact-card/demo/index.vue

@@ -124,7 +124,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-contact-card {
   .van-popup {
     height: 100%;

packages/contact-card/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-contact-card {
   padding: 15px;
@@ -16,7 +16,7 @@
     }
 
     .van-cell__left-icon {
-      color: $blue;
+      color: @blue;
       font-size: 40px;
     }
   }
@@ -34,8 +34,8 @@
       #ff6c6c 20%,
       transparent 0,
       transparent 25%,
-      $blue 0,
-      $blue 45%,
+      @blue 0,
+      @blue 45%,
       transparent 0,
       transparent 50%
     );

packages/contact-edit/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-contact-edit {
   &__buttons {

packages/contact-list/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-contact-list {
   height: 100%;
@@ -10,7 +10,7 @@
   }
 
   .van-cell__value {
-    color: $text-color;
+    color: @text-color;
     padding-right: 34px;
     position: relative;
   }
@@ -28,7 +28,7 @@
   }
 
   .van-icon-checked {
-    color: $red;
+    color: @red;
   }
 
   &__group {

packages/coupon-list/demo/index.vue

@@ -122,7 +122,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-coupon-list {
   .van-popup {
     height: 100%;

packages/coupon-list/index.less

@@ -1,11 +1,11 @@
-@import './common/var.css';
-@import './mixins/ellipsis.css';
+@import '../style/var';
+@import '../style/mixins/ellipsis';
 
 .van-coupon {
   &-list {
     height: 100%;
     position: relative;
-    background-color: $background-color;
+    background-color: @background-color;
 
     &__field {
       padding: 7px 15px;
@@ -35,7 +35,7 @@
       text-align: center;
 
       p {
-        color: $gray-dark;
+        color: @gray-dark;
         margin: 15px 0;
         font-size: 14px;
         line-height: 20px;
@@ -52,11 +52,11 @@
     overflow: hidden;
     border-radius: 4px;
     margin: 0 15px 15px;
-    background-color: $white;
+    background-color: @white;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
 
     &__content {
@@ -70,7 +70,7 @@
     h2 {
       margin: 0;
 
-      @include ellipsis;
+      .ellipsis();
     }
 
     h2 {
@@ -82,14 +82,14 @@
     p {
       font-size: 12px;
       line-height: 16px;
-      color: $gray-dark;
+      color: @gray-dark;
     }
 
     &__head {
       min-width: 90px;
 
       h2 {
-        color: $red;
+        color: @red;
         font-size: 24px;
 
         span {
@@ -114,20 +114,20 @@
       position: absolute;
 
       .van-icon {
-        border-color: $red;
-        background-color: $red;
+        border-color: @red;
+        background-color: @red;
       }
     }
 
     &__reason {
       padding: 7px 15px;
-      border-top: 1px dashed $border-color;
-      background-color: $background-color-light;
+      border-top: 1px dashed @border-color;
+      background-color: @background-color-light;
     }
 
     &--disabled {
       &:active {
-        background-color: $white;
+        background-color: @white;
       }
 
       .van-coupon-item__content {
@@ -137,7 +137,7 @@
       p,
       h2,
       span {
-        color: $gray-dark;
+        color: @gray-dark;
       }
     }
   }

packages/dialog/demo/index.vue

@@ -88,7 +88,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-dialog {
   .van-doc-demo-block > .van-button {
     margin-left: 15px;

packages/dialog/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-dialog {
   position: fixed;
@@ -9,7 +9,7 @@
   overflow: hidden;
   transition: .3s;
   border-radius: 4px;
-  background-color: $white;
+  background-color: @white;
   transform: translate3d(-50%, -50%, 0);
 
   &__header {
@@ -29,7 +29,7 @@
 
     &--has-title {
       padding-top: 12px;
-      color: $gray-darker;
+      color: @gray-darker;
     }
   }
 
@@ -53,7 +53,7 @@
   &__confirm {
     &,
     &:active {
-      color: $blue;
+      color: @blue;
     }
   }
 

packages/field/demo/index.vue

@@ -136,14 +136,14 @@ export default {
 };
 </script>
 
-<style lang="postcss">
-@import '../../vant-css/src/common/var.css';
+<style lang="less">
+@import '../../style/var';
 
 .demo-field {
   padding-bottom: 30px;
 
   .van-field__icon .van-icon {
-    color: $blue;
+    color: @blue;
   }
 }
 </style>

packages/field/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-field {
   .van-cell__title {
@@ -22,7 +22,7 @@
 
     &:disabled {
       opacity: 1;
-      color: $gray-darker;
+      color: @gray-darker;
       background-color: transparent;
     }
 
@@ -55,14 +55,14 @@
   }
 
   &__clear {
-    color: $gray;
+    color: @gray;
     font-size: 16px;
   }
 
   &__icon .van-icon {
     display: block;
     font-size: 16px;
-    color: $gray-dark;
+    color: @gray-dark;
     line-height: inherit;
   }
 
@@ -71,14 +71,14 @@
   }
 
   &__error-message {
-    color: $red;
+    color: @red;
     font-size: 12px;
     text-align: left;
   }
 
   &--disabled {
     .van-field__control {
-      color: $gray-dark;
+      color: @gray-dark;
     }
   }
 
@@ -86,7 +86,7 @@
     .van-field__control {
       &,
       &::placeholder {
-        color: $red;
+        color: @red;
       }
     }
   }

packages/goods-action-big-btn/index.less

@@ -0,0 +1,10 @@
+@import '../style/var';
+
+.van-goods-action-big-btn {
+  flex: 1;
+  padding: 0;
+
+  @media (max-width: 321px) {
+    font-size: 15px;
+  }
+}

packages/goods-action-mini-btn/index.less

@@ -0,0 +1,32 @@
+@import '../style/var';
+
+.van-goods-action-mini-btn {
+  color: @gray-darker;
+  display: flex;
+  height: 50px;
+  font-size: 10px;
+  min-width: 15%;
+  line-height: 1;
+  text-align: center;
+  background-color: @white;
+  flex-direction: column;
+  justify-content: center;
+
+  &::after {
+    border-width: 1px 0 0 1px;
+  }
+
+  &:first-child::after {
+    border-left-width: 0;
+  }
+
+  &:active {
+    background-color: @active-color;
+  }
+
+  &__icon {
+    width: 1em;
+    font-size: 20px;
+    margin: 0 auto 5px;
+  }
+}

packages/goods-action/demo/index.vue

@@ -58,7 +58,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-goods-action {
   .van-goods-action {
     position: relative;

packages/goods-action/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-goods-action {
   left: 0;
@@ -17,14 +17,14 @@
   }
 
   &-mini-btn {
-    color: $gray-darker;
+    color: @gray-darker;
     display: flex;
     height: 50px;
     font-size: 10px;
     min-width: 15%;
     line-height: 1;
     text-align: center;
-    background-color: $white;
+    background-color: @white;
     flex-direction: column;
     justify-content: center;
 
@@ -37,7 +37,7 @@
     }
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
 
     &__icon {

packages/icon/config/template-local.js

@@ -3,7 +3,7 @@ module.exports = (fontName, ttf) => {
   font-style: normal;
   font-weight: normal;
   font-family: '${fontName}';
-  src: url('../icon/${ttf}') format('truetype');
+  src: url('./${ttf}') format('truetype');
 }
 `;
 };

packages/icon/config/template.tpl

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 @font-face {
   font-style: normal;

packages/icon/demo/index.vue

@@ -29,7 +29,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-icon {
   font-size: 0;
 

packages/icon/en-US.md

@@ -20,7 +20,7 @@ View all usable icons on the right.
 Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.
 
 ```js
-import 'vant/lib/vant-css/icon-local.css';
+import 'vant/lib/icon/local.css';
 ```
 
 #### Add custom iconfont

packages/icon/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 @font-face {
   font-style: normal;

packages/icon/local.less

@@ -2,5 +2,5 @@
   font-style: normal;
   font-weight: normal;
   font-family: 'vant-icon';
-  src: url('../icon/vant-icon-872dd0.ttf') format('truetype');
+  src: url('./vant-icon-872dd0.ttf') format('truetype');
 }

packages/icon/zh-CN.md

@@ -22,7 +22,7 @@ Vue.use(Icon);
 Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用本地字体文件，请引入下面的 css 文件
 
 ```js
-import 'vant/lib/vant-css/icon-local.css';
+import 'vant/lib/icon/local.css';
 ```
 
 #### 自定义图标

packages/image-preview/demo/index.vue

@@ -55,7 +55,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-image-preview {
   .van-button {
     margin-left: 15px;

packages/image-preview/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-image-preview {
   top: 0;
@@ -22,7 +22,7 @@
     position: absolute;
     top: 10px;
     left: 50%;
-    color: $white;
+    color: @white;
     font-size: 14px;
     letter-spacing: 2px;
     transform: translate(-50%, 0);

packages/index.less

@@ -0,0 +1,70 @@
+/**
+ * Entry of all component's style
+ */
+
+/* base */
+@import './style/base';
+
+// /* common components */
+@import './col/index';
+@import './row/index';
+@import './badge/index';
+@import './badge-group/index';
+@import './circle/index';
+@import './collapse-item/index';
+@import './list/index';
+@import './nav-bar/index';
+@import './notice-bar/index';
+@import './popup/index';
+@import './search/index';
+@import './pagination/index';
+@import './panel/index';
+@import './rate/index';
+@import './steps/index';
+@import './step/index';
+@import './tag/index';
+@import './tab/index';
+@import './tabs/index';
+@import './tabbar/index';
+@import './tabbar-item/index';
+@import './image-preview/index';
+@import './stepper/index';
+@import './progress/index';
+@import './swipe/index';
+@import './swipe-item/index';
+@import './slider/index';
+
+/* form components */
+@import './checkbox/index';
+@import './field/index';
+@import './radio/index';
+@import './switch/index';
+@import './uploader/index';
+@import './password-input/index';
+@import './number-keyboard/index';
+
+/* action components */
+@import './actionsheet/index';
+@import './dialog/index';
+@import './picker/index';
+@import './pull-refresh/index';
+@import './toast/index';
+
+/* high order components */
+@import './swipe-cell/index';
+@import './switch-cell/index';
+@import './tree-select/index';
+
+/* business components */
+@import './address-edit/index';
+@import './address-list/index';
+@import './card/index';
+@import './contact-card/index';
+@import './contact-list/index';
+@import './contact-edit/index';
+@import './coupon-list/index';
+@import './goods-action/index';
+@import './goods-action-big-btn/index';
+@import './goods-action-mini-btn/index';
+@import './submit-bar/index';
+@import './sku/index';

packages/info/index.less

@@ -1,9 +1,9 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-info {
   left: 100%;
   top: -.5em;
-  color: $white;
+  color: @white;
   font-size: .6em;
   font-weight: 500;
   padding: 0 .25em;
@@ -13,7 +13,7 @@
   position: absolute;
   border-radius: .7em;
   box-sizing: border-box;
-  background-color: $red;
+  background-color: @red;
   transform: translateX(-50%);
   font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
 }

packages/lazyload/demo/index.vue

@@ -56,7 +56,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-lazyload {
   padding: 0 15px;
 

packages/list/demo/index.vue

@@ -62,7 +62,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-list {
   .van-cell {
     text-align: center;

packages/list/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-list {
   &__loading {
@@ -18,7 +18,7 @@
 
     &-text {
       font-size: 13px;
-      color: $gray-dark;
+      color: @gray-dark;
       line-height: 50px;
     }
   }

packages/loading/demo/index.vue

@@ -27,7 +27,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-loading {
   .van-loading {
     display: inline-block;

packages/loading/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-loading {
   width: 30px;
@@ -26,8 +26,8 @@
     &--circle {
       border-radius: 100%;
       border: 3px solid transparent;
-      border-color: $gray;
-      border-top-color: $gray-darker;
+      border-color: @gray;
+      border-top-color: @gray-darker;
     }
 
     &--gradient-circle {
@@ -103,9 +103,11 @@
   }
 }
 
-@for $i from 1 to 12 {
-  .van-loading__spinner--spinner i:nth-of-type($i) {
-    opacity: calc(1 - (0.75 / 12) * ($i - 1));
-    transform: rotate(calc($i * 30deg));
+.generate-spinner(@n, @i: 1) when (@i =< @n) {
+  .van-loading__spinner--spinner i:nth-of-type(@{i}) {
+    opacity: 1 - (0.75 / 12) * (@i - 1);
+    transform: rotate(@i * 30deg);
   }
+  .generate-spinner(@n, (@i + 1));
 }
+.generate-spinner(12);

packages/nav-bar/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-nav-bar {
   height: 46px;
@@ -6,10 +6,10 @@
   user-select: none;
   text-align: center;
   line-height: 46px;
-  background-color: $white;
+  background-color: @white;
 
   .van-icon {
-    color: $blue;
+    color: @blue;
     vertical-align: middle;
   }
 
@@ -52,14 +52,14 @@
   }
 
   &__text {
-    color: $blue;
+    color: @blue;
     margin: 0 -15px;
     padding: 0 15px;
     display: inline-block;
     vertical-align: middle;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 }

packages/notice-bar/demo/index.vue

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-notice-bar {
   .van-notice-bar:not(:first-of-type) {
     margin-top: 15px;

packages/notice-bar/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-notice-bar {
   display: flex;
@@ -8,8 +8,8 @@
   line-height: 24px;
   position: relative;
   align-items: center;
-  color: $orange-dark;
-  background-color: $orange-light;
+  color: @orange-dark;
+  background-color: @orange-light;
 
   &--withicon {
     position: relative;

packages/number-keyboard/demo/index.vue

@@ -69,7 +69,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-number-keyboard {
   .van-button {
     margin-left: 15px;

packages/number-keyboard/index.less

@@ -1,6 +1,4 @@
-@import "./common/var.css";
-
-$van-number-keyboard-key-height: 54px;
+@import '../style/var';
 
 .van-number-keyboard {
   left: 0;
@@ -8,7 +6,7 @@ $van-number-keyboard-key-height: 54px;
   width: 100%;
   position: fixed;
   user-select: none;
-  background-color: $white;
+  background-color: @white;
   animation-timing-function: ease-out;
 
   &__title {
@@ -17,7 +15,7 @@ $van-number-keyboard-key-height: 54px;
     line-height: 30px;
     text-align: center;
     position: relative;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &__body {
@@ -26,13 +24,13 @@ $van-number-keyboard-key-height: 54px;
 
   &__close {
     right: 0;
-    color: $blue;
+    color: @blue;
     font-size: 14px;
     padding: 0 15px;
     position: absolute;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -41,7 +39,7 @@ $van-number-keyboard-key-height: 54px;
     bottom: 0;
     width: 25%;
     position: absolute;
-    height: calc($van-number-keyboard-key-height * 4);
+    height: @van-number-keyboard-key-height * 4;
   }
 
   &--custom {
@@ -52,40 +50,40 @@ $van-number-keyboard-key-height: 54px;
 }
 
 .van-key {
-  width: calc(100% / 3);
+  width: 100% / 3;
   font-size: 24px;
   font-style: normal;
   text-align: center;
   display: inline-block;
   vertical-align: middle;
-  height: $van-number-keyboard-key-height;
-  line-height: $van-number-keyboard-key-height;
+  height: @van-number-keyboard-key-height;
+  line-height: @van-number-keyboard-key-height;
 
   &::after {
     border-width: 1px 1px 0 0;
   }
 
   &--middle {
-    width: calc(200% / 3);
+    width: 200% / 3;
   }
 
   &--big {
     width: 100%;
-    height: calc($van-number-keyboard-key-height * 2);
-    line-height: calc($van-number-keyboard-key-height * 2);
+    height: @van-number-keyboard-key-height * 2;
+    line-height: @van-number-keyboard-key-height * 2;
   }
 
   &--blue {
     font-size: 20px;
-    color: $white;
-    background-color: $blue;
+    color: @white;
+    background-color: @blue;
 
     &.van-key--active {
-      background-color: $blue;
+      background-color: @blue;
     }
 
     &::after {
-      border-color: $blue;
+      border-color: @blue;
     }
   }
 
@@ -96,10 +94,10 @@ $van-number-keyboard-key-height: 54px;
   }
 
   &--gray {
-    background-color: $background-color;
+    background-color: @background-color;
   }
 
   &--active {
-    background-color: $active-color;
+    background-color: @active-color;
   }
 }

packages/pagination/demo/index.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-pagination {
   .van-pagination {
     margin: 5px 0;

packages/pagination/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-pagination {
   display: flex;
@@ -8,16 +8,16 @@
 
   &__item {
     flex: 1;
-    color: $blue;
+    color: @blue;
     height: 40px;
     min-width: 36px;
-    background-color: $white;
+    background-color: @white;
     box-sizing: border-box;
     user-select: none;
 
     &:active {
-      color: $white;
-      background-color: $blue;
+      color: @white;
+      background-color: @blue;
     }
 
     &::after {
@@ -30,14 +30,14 @@
 
     &--disabled,
     &--disabled:active {
-      background-color: $background-color;
-      color: $gray-darker;
+      background-color: @background-color;
+      color: @gray-darker;
       opacity: 0.6;
     }
 
     &--active {
-      color: $white;
-      background-color: $blue;
+      color: @white;
+      background-color: @blue;
     }
   }
 
@@ -53,7 +53,7 @@
   &__page-desc {
     flex: 1;
     height: 40px;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &--simple {

packages/panel/demo/index.vue

@@ -22,7 +22,7 @@
 export default {};
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-panel {
   .van-panel__footer {
     text-align: right;

packages/panel/index.less

@@ -1,11 +1,11 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-panel {
-  background: $white;
+  background: @white;
 
   &__header {
     .van-cell__value {
-      color: $red;
+      color: @red;
     }
   }
 

packages/password-input/index.less

@@ -1,4 +1,4 @@
-@import "./common/var.css";
+@import '../style/var';
 
 .van-password-input {
   margin: 0 15px;
@@ -17,18 +17,18 @@
   }
 
   &__info {
-    color: $gray-dark;
+    color: @gray-dark;
   }
 
   &__error-info {
-    color: $red;
+    color: @red;
   }
 
   &__security {
     width: 100%;
     height: 50px;
     display: flex;
-    background-color: $white;
+    background-color: @white;
 
     &::after {
       border-radius: 6px;
@@ -53,7 +53,7 @@
       margin: -5px 0 0 -5px;
       visibility: hidden;
       border-radius: 100%;
-      background-color: $black;
+      background-color: @black;
     }
   }
 }

packages/picker/index.less

@@ -1,10 +1,10 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-picker {
   overflow: hidden;
   user-select: none;
   position: relative;
-  background-color: $white;
+  background-color: @white;
   -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
 
   &__toolbar {
@@ -16,12 +16,12 @@
 
   &__cancel,
   &__confirm {
-    color: $blue;
+    color: @blue;
     padding: 0 15px;
     font-size: 14px;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -47,7 +47,7 @@
     background-color: rgba(255, 255, 255, .9);
 
     circle {
-      stroke: $blue;
+      stroke: @blue;
     }
   }
 
@@ -70,11 +70,11 @@
 
     &__item {
       padding: 0 5px;
-      color: $gray-dark;
+      color: @gray-dark;
 
       &--selected {
         font-weight: 500;
-        color: $text-color;
+        color: @text-color;
       }
 
       &--disabled {

packages/popup/demo/index.vue

@@ -90,7 +90,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-popup {
   .van-button {
     margin: 10px 0 10px 15px;

packages/popup/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van {
   &-modal {
@@ -20,7 +20,7 @@
     left: 50%;
     max-height: 100%;
     overflow-y: auto;
-    background-color: $white;
+    background-color: @white;
     transition: .3s ease-out;
     -webkit-overflow-scrolling: touch;
     transform: translate3d(-50%, -50%, 0);

packages/progress/demo/index.vue

@@ -36,7 +36,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-progress {
   .van-progress {
     margin: 20px;

packages/progress/index.less

@@ -1,10 +1,10 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-progress {
   height: 4px;
   position: relative;
   border-radius: 4px;
-  background: $gray-light;
+  background: @gray-light;
 
   &__portion {
     left: 0;
@@ -30,7 +30,7 @@
     border-radius: 1em;
     word-break: keep-all;
     box-sizing: border-box;
-    background-color: $gray-light;
+    background-color: @gray-light;
     transform: translate(100%, -50%);
   }
 }

packages/pull-refresh/demo/index.vue

@@ -40,7 +40,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-pull-refresh {
   .van-pull-refresh {
     &,

packages/pull-refresh/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-pull-refresh {
   user-select: none;
@@ -17,7 +17,7 @@
     text-align: center;
     top: -50px;
     font-size: 14px;
-    color: $gray-dark;
+    color: @gray-dark;
     line-height: 50px;
   }
 

packages/radio/demo/index.vue

@@ -56,7 +56,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-radio {
   &-group {
     padding: 0 17px;

packages/radio/index.less

@@ -1,6 +1,4 @@
-@import "./common/var.css";
-
-$van-radio-size: 20px;
+@import '../style/var';
 
 .van-radio {
   overflow: hidden;
@@ -15,7 +13,7 @@ $van-radio-size: 20px;
   &__input {
     height: 1em;
     position: relative;
-    font-size: $van-radio-size;
+    font-size: @van-radio-size;
   }
 
   &__control {
@@ -29,7 +27,7 @@ $van-radio-size: 20px;
   }
 
   &__label {
-    line-height: $van-radio-size;
+    line-height: @van-radio-size;
     margin-left: 10px;
 
     &--left {
@@ -44,18 +42,18 @@ $van-radio-size: 20px;
   }
 
   .van-icon-checked {
-    color: $green;
+    color: @green;
   }
 
   .van-icon-check {
-    color: $gray-dark;
+    color: @gray-dark;
   }
 
   &--disabled {
     .van-icon {
-      color: $gray-light;
+      color: @gray-light;
       border-radius: 100%;
-      background-color: $background-color;
+      background-color: @background-color;
     }
   }
 }

packages/rate/demo/index.vue

@@ -43,7 +43,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-rate {
   .van-rate {
     margin-left: 15px;

packages/rate/index.less

@@ -1,4 +1,4 @@
-@import "./common/var.css";
+@import '../style/var';
 
 .van-rate {
   user-select: none;

packages/row/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-row {
   &::after {

packages/search/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-search {
   display: flex;
@@ -12,7 +12,7 @@
     border-radius: 4px;
 
     &__left-icon {
-      color: $gray-dark;
+      color: @gray-dark;
     }
   }
 
@@ -33,10 +33,10 @@
     padding: 0 10px;
     font-size: 14px;
     line-height: 30px;
-    color: $gray-darker;
+    color: @gray-darker;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 }

packages/sku/demo/index.vue

@@ -156,7 +156,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-sku {
   .sku-container {
     padding: 0 15px;

packages/sku/index.less

@@ -1,10 +1,10 @@
-@import './common/var.css';
-@import './mixins/clearfix.css';
+@import '../style/var';
+@import '../style/mixins/clearfix';
 
 .van-sku {
   &-container {
     font-size: 14px;
-    background: $white;
+    background: @white;
     overflow-y: visible;
     max-height: max-content; /* avoid androiod keyboard cover fields */
   }
@@ -34,7 +34,7 @@
       margin-top: -10px;
       width: 80px;
       height: 80px;
-      background: $background-color;
+      background: @background-color;
       border-radius: 2px;
 
       img {
@@ -71,7 +71,7 @@
   }
 
   &__goods-price {
-    color: $red;
+    color: @red;
     margin-top: 10px;
     vertical-align: middle;
   }
@@ -80,7 +80,7 @@
     top: 10px;
     right: 15px;
     font-size: 20px;
-    color: $gray-dark;
+    color: @gray-dark;
     position: absolute;
     text-align: center;
   }
@@ -105,22 +105,22 @@
       min-width: 52px;
       line-height: 16px;
       font-size: 12px;
-      color: $text-color;
+      color: @text-color;
       text-align: center;
-      border: 1px solid $gray-dark;
+      border: 1px solid @gray-dark;
       border-radius: 3px;
       box-sizing: border-box;
 
       &--active {
-        color: $white;
-        border-color: $red;
-        background: $red;
+        color: @white;
+        border-color: @red;
+        background: @red;
       }
 
       &--disabled {
-        background: $active-color;
-        border-color: $border-color;
-        color: $gray;
+        background: @active-color;
+        border-color: @border-color;
+        color: @gray;
       }
     }
   }
@@ -150,19 +150,19 @@
   &__stock {
     display: inline-block;
     margin-right: 10px;
-    color: $gray-dark;
+    color: @gray-dark;
     font-size: 12px;
   }
 
   &__quota {
     display: inline-block;
-    color: $red;
+    color: @red;
     font-size: 12px;
   }
 
   &-messages {
     padding-bottom: 10px;
-    background: $background-color;
+    background: @background-color;
 
     &__image-cell {
       .van-cell__title {
@@ -180,7 +180,7 @@
 
     &__header {
       padding: 0 10px;
-      border: 1px solid $border-color;
+      border: 1px solid @border-color;
       line-height: 24px;
       border-radius: 3px;
       font-size: 12px;
@@ -198,7 +198,7 @@
       float: left;
       margin: 10px 10px 0 0;
       position: relative;
-      border: 1px solid $border-color;
+      border: 1px solid @border-color;
 
       img {
         max-width: 100%;
@@ -211,7 +211,7 @@
 
     &__delete {
       position: absolute;
-      color: $red;
+      color: @red;
       top: -12px;
       right: -14px;
       z-index: 1;
@@ -219,7 +219,7 @@
 
       &::before {
         border-radius: 14px;
-        background-color: $white;
+        background-color: @white;
       }
     }
 

packages/slider/demo/index.vue

@@ -64,7 +64,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-slider {
   user-select: none;
 

packages/slider/index.less

@@ -1,14 +1,14 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-slider {
   position: relative;
   border-radius: 999px;
-  background-color: $gray-light;
+  background-color: @gray-light;
 
   &__bar {
     position: relative;
     border-radius: inherit;
-    background-color: $blue;
+    background-color: @blue;
   }
 
   &__button {
@@ -18,7 +18,7 @@
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background-color: $white;
+    background-color: @white;
     transform: translate3d(50%, -50%, 0);
     box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
 

packages/step/index.less

@@ -1,61 +1,10 @@
-@import './common/var.css';
-
-.van-steps {
-  overflow: hidden;
-  background-color: $white;
-
-  &--horizontal {
-    padding: 0 10px;
-
-    .van-steps__items {
-      display: flex;
-      margin: 0 0 10px;
-      overflow: hidden;
-      position: relative;
-      padding-bottom: 22px;
-
-      &.van-steps__items--alone {
-        padding-top: 10px;
-      }
-    }
-  }
-
-  &--vertical {
-    padding: 0 0 0 35px;
-  }
-
-  &__icon {
-    float: left;
-    margin-right: 10px;
-  }
-
-  .van-icon {
-    font-size: 40px;
-  }
-
-  &__message {
-    height: 40px;
-    margin: 15px 0;
-  }
-
-  &__title {
-    font-size: 14px;
-    color: $text-color;
-    padding-top: 4px;
-  }
-
-  &__desc {
-    font-size: 12px;
-    line-height: 1.5;
-    color: $gray-dark;
-  }
-}
+@import '../style/var';
 
 .van-step {
   flex: 1;
   font-size: 14px;
   position: relative;
-  color: $gray-dark;
+  color: @gray-dark;
 
   &--horizontal {
     float: left;
@@ -92,7 +41,7 @@
       top: 28px;
       left: -8px;
       padding: 0 8px;
-      background-color: $white;
+      background-color: @white;
       z-index: 1;
     }
 
@@ -109,20 +58,20 @@
       top: 30px;
       width: 100%;
       height: 1px;
-      background-color: $border-color;
+      background-color: @border-color;
     }
 
     &.van-step--finish {
-      color: $text-color;
+      color: @text-color;
 
       .van-step__circle,
       .van-step__line {
-        background-color: $green;
+        background-color: @green;
       }
     }
 
     &.van-step--process {
-      color: $text-color;
+      color: @text-color;
 
       .van-step__circle-container {
         top: 24px;
@@ -130,7 +79,7 @@
 
       .van-icon {
         font-size: 12px;
-        color: $green;
+        color: @green;
         display: block;
       }
     }
@@ -141,7 +90,7 @@
     width: 5px;
     height: 5px;
     border-radius: 50%;
-    background-color: $gray-dark;
+    background-color: @gray-dark;
   }
 
   &--vertical {
@@ -161,7 +110,7 @@
         position: absolute;
         width: 1px;
         height: 20px;
-        background-color: $white;
+        background-color: @white;
         top: 0;
         left: -15px;
         z-index: 1;
@@ -191,7 +140,7 @@
       left: -15px;
       width: 1px;
       height: 100%;
-      background-color: $border-color;
+      background-color: @border-color;
     }
   }
 }

packages/stepper/demo/index.vue

@@ -32,7 +32,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-stepper {
   .van-stepper {
     margin-left: 15px;

packages/stepper/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-stepper {
   font-size: 0;
@@ -8,8 +8,8 @@
     width: 40px;
     height: 30px;
     box-sizing: border-box;
-    background-color: $white;
-    border: 1px solid $border-color;
+    background-color: @white;
+    border: 1px solid @border-color;
     position: relative;
     padding: 5px;
     vertical-align: middle;
@@ -33,24 +33,24 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: $gray-darker;
+      background-color: @gray-darker;
     }
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
 
     &--disabled {
-      background-color: $background-color;
+      background-color: @background-color;
 
       &::before,
       &::after {
-        background-color: $gray;
+        background-color: @gray;
       }
     }
 
     &--disabled:active {
-      background-color: $background-color;
+      background-color: @background-color;
     }
   }
 
@@ -70,19 +70,19 @@
     width: 33px;
     height: 26px;
     padding: 1px;
-    border: 1px solid $border-color;
+    border: 1px solid @border-color;
     border-width: 1px 0;
     border-radius: 0;
     box-sizing: content-box;
-    color: $gray-darker;
+    color: @gray-darker;
     font-size: 14px;
     vertical-align: middle;
     text-align: center;
     -webkit-appearance: none;
 
     &[disabled] {
-      color: $gray;
-      background-color: $background-color;
+      color: @gray;
+      background-color: @background-color;
     }
   }
 

packages/steps/demo/index.vue

@@ -88,13 +88,13 @@ export default {
 };
 </script>
 
-<style lang="postcss">
-@import '../../vant-css/src/common/var.css';
+<style lang="less">
+@import '../../style/var';
 
 .demo-steps {
   .steps-success,
   .van-icon-location {
-    color: $green;
+    color: @green;
   }
 
   .van-button {

packages/steps/index.less

@@ -0,0 +1,52 @@
+@import '../style/var';
+
+.van-steps {
+  overflow: hidden;
+  background-color: @white;
+
+  &--horizontal {
+    padding: 0 10px;
+
+    .van-steps__items {
+      display: flex;
+      margin: 0 0 10px;
+      overflow: hidden;
+      position: relative;
+      padding-bottom: 22px;
+
+      &.van-steps__items--alone {
+        padding-top: 10px;
+      }
+    }
+  }
+
+  &--vertical {
+    padding: 0 0 0 35px;
+  }
+
+  &__icon {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .van-icon {
+    font-size: 40px;
+  }
+
+  &__message {
+    height: 40px;
+    margin: 15px 0;
+  }
+
+  &__title {
+    font-size: 14px;
+    color: @text-color;
+    padding-top: 4px;
+  }
+
+  &__desc {
+    font-size: 12px;
+    line-height: 1.5;
+    color: @gray-dark;
+  }
+}

packages/style/base.less

@@ -0,0 +1,16 @@
+/**
+ * Entry of basic styles
+ */
+
+@import './var';
+@import './normalize';
+@import './ellipsis';
+@import './clearfix';
+@import './hairline';
+@import './animation';
+@import '../info/index';
+@import '../icon/index';
+@import '../loading/index';
+@import '../button/index';
+@import '../cell/index';
+@import '../cell-group/index';

packages/style/clearfix.less

@@ -0,0 +1,5 @@
+@import './mixins/clearfix';
+
+.van-clearfix {
+  .clearfix();
+}

packages/style/demo/index.vue

@@ -50,8 +50,8 @@ export default {
 };
 </script>
 
-<style lang="postcss">
-.demo-vant-css {
+<style lang="less">
+.demo-style {
   .van-ellipsis {
     font-size: 13px;
     margin-left: 15px;
@@ -63,7 +63,7 @@ export default {
     background-color: #fff;
 
     &::after {
-      top: 15px;
+      top: 5px;
     }
   }
 

packages/style/ellipsis.less

@@ -0,0 +1,5 @@
+@import './mixins/ellipsis';
+
+.van-ellipsis {
+  .ellipsis();
+}

packages/style/hairline.less

@@ -1,10 +1,10 @@
-@import "../mixins/hairline.css";
+@import './mixins/hairline';
 
 [class*='van-hairline'] {
   position: relative;
 
   &::after {
-    @include hairline;
+    .hairline();
   }
 }
 

packages/style/mixins/clearfix.less

@@ -1,4 +1,4 @@
-@mixin clearfix {
+.clearfix() {
   &::after {
     content: '';
     display: table;

packages/style/mixins/ellipsis.less

@@ -1,12 +1,13 @@
-@mixin multi-ellipsis($lines) {
+.multi-ellipsis(@lines) {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: $lines;
+  -webkit-line-clamp: @lines;
+  /* autoprefixer: ignore next */
   -webkit-box-orient: vertical;
 }
 
-@mixin ellipsis {
+.ellipsis() {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

packages/style/mixins/hairline.less

@@ -0,0 +1,27 @@
+.hairline-common() {
+  content: ' ';
+  position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.hairline(@border-color: #eee) {
+  .hairline-common();
+
+  top: -50%;
+  left: -50%;
+  right: -50%;
+  bottom: -50%;
+  transform: scale(0.5);
+  border: 0 solid @border-color;
+}
+
+.hairline-bottom(@border-color: #eee, @left: 0) {
+  .hairline-common();
+
+  left: @left;
+  right: 0;
+  bottom: 0;
+  transform: scaleY(0.5);
+  border-bottom: 1px solid @border-color;
+}

packages/style/reset.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import './var';
 
 html,
 body,
@@ -149,8 +149,8 @@ summary {
 
 body {
   font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
-  color: $text-color;
-  background-color: $background-color;
+  color: @text-color;
+  background-color: @background-color;
 }
 
 a {

packages/style/var.less

@@ -0,0 +1,54 @@
+// color variables
+@black: #000;
+@white: #fff;
+@red: #f44;
+@blue: #1989fa;
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #4b0;
+@gray: #c9c9c9;
+@gray-light: #e5e5e5;
+@gray-darker: #666;
+@gray-dark: #999;
+
+// default colors
+@text-color: #333;
+@border-color: #eee;
+@active-color: #e8e8e8;
+@background-color: #f8f8f8;
+@background-color-light: #fafafa;
+
+// button
+@button-default-color: @text-color;
+@button-default-background-color: @white;
+@button-default-border-color: @border-color;
+@button-primary-color: @white;
+@button-primary-background-color: @green;
+@button-primary-border-color: @green;
+@button-danger-color: @white;
+@button-danger-background-color: @red;
+@button-danger-border-color: @red;
+@button-warning-color: @white;
+@button-warning-background-color: @orange;
+@button-warning-border-color: @orange;
+@button-bottom-action-default-color: @white;
+@button-bottom-action-default-background-color: @orange;
+@button-bottom-action-primary-color: @white;
+@button-bottom-action-primary-background-color: @red;
+
+// checkbox
+@van-checkbox-size: 20px;
+
+// radio
+@van-radio-size: 20px;
+
+// swipe
+@van-swipe-indicator: 6px;
+
+// tab
+@van-tabs-line-height: 44px;
+@van-tabs-card-height: 30px;
+
+// number keyboard
+@van-number-keyboard-key-height: 54px;

packages/submit-bar/demo/index.vue

@@ -82,8 +82,8 @@ export default {
 };
 </script>
 
-<style lang="postcss">
-@import '../../vant-css/src/common/var.css';
+<style lang="less">
+@import '../../style/var';
 
 .demo-submit-bar {
   .van-submit-bar {
@@ -91,7 +91,7 @@ export default {
   }
 
   .edit-address {
-    color: $blue;
+    color: @blue;
   }
 
   .van-checkbox {

packages/submit-bar/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-submit-bar {
   left: 0;
@@ -21,14 +21,14 @@
     display: flex;
     font-size: 14px;
     align-items: center;
-    background-color: $white;
+    background-color: @white;
   }
 
   &__text {
     flex: 1;
     font-weight: 500;
     text-align: right;
-    color: $text-color;
+    color: @text-color;
     padding-right: 12px;
 
     span {
@@ -37,7 +37,7 @@
   }
 
   &__price {
-    color: $red;
+    color: @red;
     font-size: 18px;
 
     &::first-letter {