[improvement] use less as css compiler (#664)

build/compiler.js

@@ -1,6 +1,7 @@
 const gulp = require('gulp');
 const path = require('path');
 const babel = require('gulp-babel');
+const less = require('gulp-less');
 const postcss = require('gulp-postcss');
 const cssmin = require('gulp-clean-css');
 const rename = require('gulp-rename');
@@ -8,15 +9,16 @@ const rename = require('gulp-rename');
 const isProduction = process.env.NODE_ENV === 'production';
 const src = path.join(__dirname, '../packages');
 const dist = path.join(__dirname, isProduction ? '../dist' : '../example/dist');
-const ext = ['js', 'ts', 'css', 'json', 'wxml'];
+const ext = ['js', 'ts', 'less', 'json', 'wxml'];
 
 function copy(ext) {
   return gulp.src([src + '/**/*.' + ext]).pipe(gulp.dest(dist));
 }
 
-gulp.task('compile-css', () => {
+gulp.task('compile-less', () => {
   return gulp
-    .src([src + '/**/*.css'])
+    .src([src + '/**/*.less'])
+    .pipe(less())
     .pipe(postcss())
     .pipe(cssmin())
     .pipe(

build/webpack.doc.dev.js

@@ -52,11 +52,12 @@ module.exports = {
         use: 'babel-loader'
       },
       {
-        test: /\.(css|postcss)$/,
+        test: /\.(css|less)$/,
         use: [
           'style-loader',
           'css-loader',
-          'postcss-loader'
+          'postcss-loader',
+          'less-loader'
         ]
       },
       {

dist/col/index.wxss

@@ -1 +1 @@
-.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16667%}.van-col--offset-1{margin-left:4.16667%}.van-col--2{width:8.33333%}.van-col--offset-2{margin-left:8.33333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66667%}.van-col--offset-4{margin-left:16.66667%}.van-col--5{width:20.83333%}.van-col--offset-5{margin-left:20.83333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16667%}.van-col--offset-7{margin-left:29.16667%}.van-col--8{width:33.33333%}.van-col--offset-8{margin-left:33.33333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66667%}.van-col--offset-10{margin-left:41.66667%}.van-col--11{width:45.83333%}.van-col--offset-11{margin-left:45.83333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16667%}.van-col--offset-13{margin-left:54.16667%}.van-col--14{width:58.33333%}.van-col--offset-14{margin-left:58.33333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66667%}.van-col--offset-16{margin-left:66.66667%}.van-col--17{width:70.83333%}.van-col--offset-17{margin-left:70.83333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16667%}.van-col--offset-19{margin-left:79.16667%}.van-col--20{width:83.33333%}.van-col--offset-20{margin-left:83.33333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66667%}.van-col--offset-22{margin-left:91.66667%}.van-col--23{width:95.83333%}.van-col--offset-23{margin-left:95.83333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}
+.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}

dist/common/index.wxss

@@ -1 +0,0 @@
-.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2}.van-multi-ellipsis--l3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:-50%;left:-50%;right:-50%;bottom:-50%;-webkit-transform:scale(.5);transform:scale(.5);pointer-events:none;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}

docs/src/App.vue

@@ -16,7 +16,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .van-doc-intro {
   text-align: center;
   font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

docs/src/Preview.vue

@@ -72,7 +72,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 body {
   margin: 0;
   color: #333;

package.json

@@ -37,12 +37,13 @@
     "gulp": "^3.9.1",
     "gulp-babel": "^8.0.0",
     "gulp-clean-css": "^3.9.0",
+    "gulp-less": "^4.0.1",
     "gulp-postcss": "^8.0.0",
     "gulp-rename": "^1.2.2",
     "html-webpack-plugin": "^3.2.0",
-    "postcss-calc": "^6.0.2",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "precss": "^3.1.2",
     "progress-bar-webpack-plugin": "^1.11.0",
     "style-loader": "^0.23.0",
     "typescript": "^3.0.3",

packages/action-sheet/index.less

@@ -1,12 +1,12 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
 
 .van-action-sheet {
-  color: $text-color;
+  color: @text-color;
   max-height: 90%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: $background-color;
+  background-color: @background-color;
 
   &__item,
   &__cancel {
@@ -14,18 +14,18 @@
     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;
     }
   }
 
@@ -36,7 +36,7 @@
 
   &__subname {
     font-size: 12px;
-    color: $gray-darker;
+    color: @gray-darker;
     margin-left: 5px;
   }
 
@@ -59,7 +59,7 @@
     right: 0;
     padding: 0 15px;
     font-size: 18px !important;
-    color: $gray-dark;
+    color: @gray-dark;
     position: absolute !important;
     line-height: inherit !important;
   }

packages/area/index.less

@@ -1,10 +1,10 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-picker {
   -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
   position: relative;
   overflow: hidden;
-  background-color: $white;
+  background-color: @white;
   user-select: none;
 
   &__toolbar {
@@ -18,10 +18,10 @@
   &__cancel,
   &__confirm {
     padding: 0 15px;
-    color: $blue;
+    color: @blue;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -55,10 +55,10 @@
 
     &__item {
       padding: 0 5px;
-      color: $gray-dark;
+      color: @gray-dark;
 
       &--selected {
-        color: $black;
+        color: @black;
       }
 
       &--disabled {

packages/badge-group/index.css

@@ -1,6 +0,0 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
-
-.van-badge-group {
-  width: 85px;
-}

packages/badge-group/index.less

@@ -0,0 +1,6 @@
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
+
+.van-badge-group {
+  width: 85px;
+}

packages/badge/index.less

@@ -1,5 +1,5 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
 
 .van-badge {
   display: block;
@@ -7,15 +7,15 @@
   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;
   }
 
   &::after {
@@ -24,8 +24,8 @@
 
   &--active {
     font-weight: bold;
-    color: $text-color;
-    border-color: $red;
+    color: @text-color;
+    border-color: @red;
 
     &::after {
       border-right-width: 1px;
@@ -33,7 +33,7 @@
 
     &,
     &:active {
-      background-color: $white;
+      background-color: @white;
     }
   }
 
@@ -41,7 +41,7 @@
     position: absolute;
     top: 2px;
     right: 2px;
-    color: $white;
+    color: @white;
     font-size: 10px;
     font-weight: normal;
     transform: scale(0.8);
@@ -51,6 +51,6 @@
     min-width: 18px;
     line-height: 18px;
     border-radius: 9px;
-    background-color: $red;
+    background-color: @red;
   }
 }

packages/button/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-button {
   position: relative;
@@ -23,8 +23,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%);
   }
@@ -38,42 +38,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;
     }
   }
 
@@ -119,8 +119,8 @@
   }
 
   &--disabled {
-    color: $button-disabled-color;
-    background-color: $button-disabled-background-color;
-    border: 1px solid $button-disabled-border-color;
+    color: @button-disabled-color;
+    background-color: @button-disabled-background-color;
+    border: 1px solid @button-disabled-border-color;
   }
 }

packages/card/index.less

@@ -1,8 +1,8 @@
-@import '../common/style/var.css';
-@import '../common/style/mixins/ellipsis.css';
+@import '../common/style/var.less';
+@import '../common/style/mixins/ellipsis.less';
 
 .van-card {
-  color: $text-color;
+  color: @text-color;
   height: 100px;
   font-size: 16px;
   background: #fafafa;
@@ -54,15 +54,15 @@
   &__title {
     max-height: 40px;
 
-    @include multi-ellipsis(2);
+    .multi-ellipsis(2);
   }
 
   &__desc {
-    color: $gray-darker;
+    color: @gray-darker;
     font-size: 12px;
     max-height: 20px;
 
-    @include ellipsis;
+    .ellipsis();
   }
 
   &__price,
@@ -78,7 +78,7 @@
   }
 
   &__num {
-    color: $gray-darker;
+    color: @gray-darker;
     font-size: 12px;
   }
 

packages/cell-group/index.css

@@ -1,2 +0,0 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';

packages/cell-group/index.less

@@ -0,0 +1,2 @@
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';

packages/cell/index.less

@@ -1,5 +1,5 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
 
 .van-cell {
   width: 100%;
@@ -8,8 +8,8 @@
   box-sizing: border-box;
   line-height: 24px;
   position: relative;
-  background-color: $white;
-  color: $text-color;
+  background-color: @white;
+  color: @text-color;
   font-size: 14px;
 
   &::after {
@@ -20,13 +20,13 @@
   }
 
   &-group {
-    background-color: $white;
+    background-color: @white;
   }
 
   &__label {
     font-size: 12px;
     line-height: 1.2;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &__title,
@@ -52,7 +52,7 @@
   }
 
   &__right-icon {
-    color: $gray-dark;
+    color: @gray-dark;
     font-size: 12px;
     line-height: 24px;
     margin-left: 5px;
@@ -60,7 +60,7 @@
 
   &--clickable {
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -72,7 +72,7 @@
       position: absolute;
       left: 7px;
       font-size: 14px;
-      color: $red;
+      color: @red;
     }
   }
 

packages/col/index.css

@@ -1,9 +0,0 @@
-.van-col {
-  float: left;
-  box-sizing: border-box;
-}
-
-@for $i from 1 to 24 {
-  .van-col--$i { width: calc($i * 100% / 24); }
-  .van-col--offset-$i { margin-left: calc($i * 100% / 24); }
-}

packages/col/index.less

@@ -0,0 +1,11 @@
+.van-col {
+  float: left;
+  box-sizing: border-box;
+}
+
+.generate(24);
+.generate(@n, @i: 1) when (@i =< @n) {
+  .van-col--@{i} { width: @i * 100% / 24; }
+  .van-col--offset-@{i} { margin-left: @i * 100% / 24; }
+  .generate(@n, (@i + 1));
+}

packages/common/index.css

@@ -2,7 +2,7 @@
  * Entry of basic styles	
  */	
 
-@import "./style/var.css";	
-@import "./style/ellipsis.css";	
-@import "./style/clearfix.css";	
-@import "./style/hairline.css";
+@import "./style/var.less";	
+@import "./style/ellipsis.less";	
+@import "./style/clearfix.less";	
+@import "./style/hairline.less";

packages/common/style/clearfix.css

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

packages/common/style/clearfix.less

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

packages/common/style/ellipsis.css

@@ -1,13 +0,0 @@
-@import './mixins/ellipsis.css';
-
-.van-ellipsis {
-  @include ellipsis;
-}
-
-.van-multi-ellipsis--l2 {
-  @include multi-ellipsis(2);
-}
-
-.van-multi-ellipsis--l3 {
-  @include multi-ellipsis(3);
-}

packages/common/style/ellipsis.less

@@ -0,0 +1,13 @@
+@import './mixins/ellipsis.less';
+
+.van-ellipsis {
+  .ellipsis();
+}
+
+.van-multi-ellipsis--l2 {
+  .multi-ellipsis(2);
+}
+
+.van-multi-ellipsis--l3 {
+  .multi-ellipsis(3);
+}

packages/common/style/hairline.less

@@ -1,4 +1,4 @@
-@import "./mixins/hairline.css";
+@import "./mixins/hairline.less";
 
 .van-hairline,
 .van-hairline--top,
@@ -10,7 +10,7 @@
   position: relative;
 
   &::after {
-    @include hairline;
+    .hairline();
   }
 }
 

packages/common/style/mixins/clearfix.less

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

packages/common/style/mixins/ellipsis.less

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

packages/common/style/mixins/hairline.less

@@ -1,4 +1,4 @@
-@mixin hairline($border-color: #eee) {
+.hairline(@border-color: #eee) {
   content: '';
   position: absolute;
   top: -50%;
@@ -9,5 +9,5 @@
   pointer-events: none;
   box-sizing: border-box;
   transform-origin: center; /* cover wechat button:after default transforn-origin */
-  border: 0 solid $border-color;
+  border: 0 solid @border-color;
 }

packages/common/style/var.css

@@ -1,38 +0,0 @@
-/* color variables */
-$black: #000;
-$white: #fff;
-$red: #f44;
-$blue: #38f;
-$orange: #f85;
-$green: #06bf04;
-$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;
-
-/* 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: #4b0;
-$button-primary-border-color: #4b0;
-$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-disabled-color: $gray-dark;
-$button-disabled-background-color: $active-color;
-$button-disabled-border-color: $border-color;
-$button-bottom-action-default-color: $white;
-$button-bottom-action-default-background-color: #f85;
-$button-bottom-action-primary-color: $white;
-$button-bottom-action-primary-background-color: $red;

packages/common/style/var.less

@@ -0,0 +1,38 @@
+/* color variables */
+@black: #000;
+@white: #fff;
+@red: #f44;
+@blue: #38f;
+@orange: #f85;
+@green: #06bf04;
+@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;
+
+/* 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: #4b0;
+@button-primary-border-color: #4b0;
+@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-disabled-color: @gray-dark;
+@button-disabled-background-color: @active-color;
+@button-disabled-border-color: @border-color;
+@button-bottom-action-default-color: @white;
+@button-bottom-action-default-background-color: #f85;
+@button-bottom-action-primary-color: @white;
+@button-bottom-action-primary-background-color: @red;

packages/dialog/index.less

@@ -1,12 +1,12 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
 
 .van-dialog {
   width: 85%;
   font-size: 16px;
   overflow: hidden;
   border-radius: 4px;
-  background-color: $white;
+  background-color: @white;
 
   &__header {
     padding: 15px 0 0;
@@ -22,7 +22,7 @@
     line-height: 1.5;
 
     &--has-title {
-      color: $gray-darker;
+      color: @gray-darker;
       font-size: 14px;
     }
   }
@@ -45,7 +45,7 @@
   &__confirm {
     &,
     &:active {
-      color: $red !important;
+      color: @red !important;
     }
   }
 

packages/field/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-field {
   &__body {
@@ -26,7 +26,7 @@
 
     &--disabled {
       opacity: 1;
-      color: $gray-darker;
+      color: @gray-darker;
       background-color: transparent;
     }
 
@@ -58,11 +58,11 @@
   }
 
   &__clear {
-    color: $gray;
+    color: @gray;
   }
 
   &__icon-container {
-    color: $gray-dark;
+    color: @gray-dark;
   }
 
   &__icon {
@@ -76,12 +76,12 @@
   }
 
   &__error-message {
-    color: $red;
+    color: @red;
     font-size: 12px;
     text-align: left;
   }
 
   &--error {
-    color: $red;
+    color: @red;
   }
 }

packages/icon/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 @font-face {
   font-style: normal;
@@ -26,7 +26,7 @@
     position: absolute;
     border-radius: .6em;
     box-sizing: border-box;
-    background-color: $red;
+    background-color: @red;
     transform: translateX(-50%);
     font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
   }

packages/loading/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-loading {
   z-index: 0;
@@ -48,12 +48,15 @@
   }
 }
 
-@for $i from 1 to 12 {
-  .van-loading__dot:nth-of-type($i) {
-    opacity: calc(1 - (0.75 / 12) * ($i - 1));
-    transform: rotate(calc($i * 30deg));
+
+.generate(@n, @i: 1) when (@i =< @n) {
+  .van-loading__dot:nth-of-type(@{i}) {
+    opacity: 1 - (0.75 / 12) * (@i - 1);
+    transform: rotate(@i * 30deg);
   }
+  .generate(@n, (@i + 1));
 }
+.generate(12);
 
 @keyframes van-rotate {
   from {

packages/nav-bar/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-nav-bar {
   height: 46px;
@@ -6,10 +6,10 @@
   user-select: none;
   text-align: center;
   line-height: 46px;
-  background-color: $white;
+  background-color: @white;
 
   &__arrow {
-    color: $blue;
+    color: @blue;
     vertical-align: middle;
     transform: rotate(180deg);
 
@@ -48,14 +48,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/notify/index.less

@@ -1,10 +1,10 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-notify {
   top: 0;
   width: 100%;
   z-index: 110;
-  color: $white;
+  color: @white;
   position: fixed;
   min-height: 32px;
   line-height: 2.3;

packages/panel/index.css

@@ -1,14 +0,0 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
-
-.van-panel {
-  background: $white;
-
-  &__header-value {
-    color: $red;
-  }
-
-  &__footer {
-    padding: 10px 15px;
-  }
-}

packages/panel/index.less

@@ -0,0 +1,14 @@
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
+
+.van-panel {
+  background: @white;
+
+  &__header-value {
+    color: @red;
+  }
+
+  &__footer {
+    padding: 10px 15px;
+  }
+}

packages/popup/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-popup {
   top: 50%;
@@ -7,7 +7,7 @@
   max-height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
-  background-color: $white;
+  background-color: @white;
   -webkit-overflow-scrolling: touch;
   animation: ease both;
 

packages/progress/index.less

@@ -1,10 +1,10 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .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/radio-group/index.less

@@ -1,6 +1,6 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
-$van-radio-size: 20px;
+@van-radio-size: 20px;
 
 .van-radio {
   overflow: hidden;
@@ -15,7 +15,7 @@ $van-radio-size: 20px;
   &__input {
     height: 1em;
     position: relative;
-    font-size: $van-radio-size;
+    font-size: @van-radio-size;
   }
 
   &__control {
@@ -30,7 +30,7 @@ $van-radio-size: 20px;
   }
 
   &__label {
-    line-height: $van-radio-size;
+    line-height: @van-radio-size;
     margin-left: 10px;
 
     &--left {
@@ -43,13 +43,13 @@ $van-radio-size: 20px;
     width: 1em;
     pointer-events: none;
     &--disabled {
-      color: $gray-light;
+      color: @gray-light;
     }
     &--checked {
-      color: $green;
+      color: @green;
     }
     &--check {
-      color: $gray-dark;
+      color: @gray-dark;
     }
   }
 }

packages/radio/index.less

@@ -1,6 +1,6 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
-$van-radio-size: 20px;
+@van-radio-size: 20px;
 
 .van-radio {
   overflow: hidden;
@@ -15,7 +15,7 @@ $van-radio-size: 20px;
 
   &__input {
     position: relative;
-    font-size: $van-radio-size;
+    font-size: @van-radio-size;
   }
 
   &__control {
@@ -31,9 +31,9 @@ $van-radio-size: 20px;
 
   &__label {
     margin-left: 10px;
-    color: $text-color;
+    color: @text-color;
     font-size: 16px;
-    line-height: $van-radio-size;
+    line-height: @van-radio-size;
 
     &--left {
       margin: 0 10px 0 0;
@@ -47,15 +47,15 @@ $van-radio-size: 20px;
     line-height: 0;
 
     &--disabled {
-      color: $gray-light;
+      color: @gray-light;
     }
 
     &--checked {
-      color: $green;
+      color: @green;
     }
 
     &--check {
-      color: $gray-dark;
+      color: @gray-dark;
     }
   }
 }

packages/search/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-search {
   display: flex;
@@ -11,7 +11,7 @@
     border-radius: 4px;
 
     &__left-icon {
-      color: $gray-dark;
+      color: @gray-dark;
     }
   }
 
@@ -32,10 +32,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/slider/index.less

@@ -1,14 +1,14 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .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/stepper/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-stepper {
   font-size: 0;
@@ -8,7 +8,7 @@
   &__input {
     display: inline-block;
     vertical-align: middle;
-    background-color: $white;
+    background-color: @white;
   }
 
   &__minus,
@@ -16,7 +16,7 @@
     width: 40px;
     height: 30px;
     box-sizing: border-box;
-    border: 1px solid $border-color;
+    border: 1px solid @border-color;
     position: relative;
     padding: 5px;
 
@@ -43,20 +43,20 @@
     }
 
     &: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;
     }
   }
 
@@ -76,18 +76,18 @@
     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;
     text-align: center;
     -webkit-appearance: none;
 
     &--disabled {
-      color: $gray;
-      background-color: $background-color;
+      color: @gray;
+      background-color: @background-color;
     }
   }
 }

packages/steps/index.less

@@ -1,9 +1,9 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
 
 .van-steps {
   overflow: hidden;
-  background-color: $white;
+  background-color: @white;
 
   &--horizontal {
     position: relative;
@@ -21,10 +21,10 @@
   position: relative;
   flex: 1;
   font-size: 14px;
-  color: $gray-dark;
+  color: @gray-dark;
 
   &--finish {
-    color: $text-color;
+    color: @text-color;
   }
 
   &__circle {
@@ -70,7 +70,7 @@
       bottom: 6px;
       z-index: 1;
       padding: 0 8px;
-      background-color: $white;
+      background-color: @white;
       transform: translate3d(-50%, 50%, 0);
     }
 
@@ -86,17 +86,17 @@
       right: 0;
       bottom: 6px;
       height: 1px;
-      background-color: $border-color;
+      background-color: @border-color;
       transform: translate3d(0, 50%, 0);
     }
 
     &.van-step--process {
-      color: $text-color;
+      color: @text-color;
 
       .van-step__active {
         display: block;
         font-size: 12px;
-        color: $green;
+        color: @green;
         line-height: 1;
       }
     }
@@ -117,7 +117,7 @@
         position: absolute;
         width: 1px;
         height: 20px;
-        background-color: $white;
+        background-color: @white;
         top: 0;
         left: -15px;
         z-index: 1;
@@ -143,7 +143,7 @@
       z-index: 1;
       width: 1px;
       height: 100%;
-      background-color: $border-color;
+      background-color: @border-color;
       transform: translate3d(-50%, 0, 0);
     }
   }

packages/submit-bar/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-submit-bar {
   z-index: 100;
@@ -11,7 +11,7 @@
   &__tip {
     padding: 10px;
     background-color: #fff7cc;
-    color: $orange;
+    color: @orange;
     font-size: 12px;
     line-height: 18px;
   }
@@ -20,20 +20,20 @@
     display: flex;
     align-items: center;
     height: 50px;
-    background-color: $white;
+    background-color: @white;
     font-size: 14px;
   }
 
   &__text {
     flex: 1;
-    color: $text-color;
+    color: @text-color;
     font-weight: 500;
     text-align: right;
   }
 
   &__price {
     padding-right: 12px;
-    color: $red;
+    color: @red;
   }
 
   &__button {

packages/switch-cell/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-switch-cell {
   padding-top: 8px;

packages/switch/index.less

@@ -1,11 +1,11 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-switch {
   height: 1em;
   width: 1.6em;
   display: inline-block;
   position: relative;
-  background: $white;
+  background: @white;
   box-sizing: content-box;
   border: 1px solid rgba(0, 0, 0, .1);
   border-radius: 1em;
@@ -19,7 +19,7 @@
     transition: .3s;
     position: absolute;
     border-radius: 100%;
-    background-color: $white;
+    background-color: @white;
     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);
   }
 

packages/tabbar-item/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-tabbar-item {
   float: left;
@@ -29,7 +29,7 @@
         content: ' ';
         position: absolute;
         border-radius: 100%;
-        background-color: $red;
+        background-color: @red;
       }
     }
 
@@ -40,6 +40,6 @@
   }
 
   &--active {
-    color: $blue;
+    color: @blue;
   }
 }

packages/tabbar/index.less

@@ -1,4 +1,4 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-tabbar {
   width: 100%;

packages/tabs/index.less

@@ -1,8 +1,8 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
 
-$van-tabs-line-height: 44px;
-$van-tabs-card-height: 30px;
+@van-tabs-line-height: 44px;
+@van-tabs-card-height: 30px;
 
 .van-tabs {
   position: relative;
@@ -35,7 +35,7 @@ $van-tabs-card-height: 30px;
     display: flex;
     user-select: none;
     position: relative;
-    background-color: $white;
+    background-color: @white;
 
     &--line {
       height: 100%;
@@ -45,21 +45,21 @@ $van-tabs-card-height: 30px;
       margin: 0 15px;
       border-radius: 2px;
       box-sizing: border-box;
-      border: 1px solid $red;
-      height: $van-tabs-card-height;
+      border: 1px solid @red;
+      height: @van-tabs-card-height;
 
       .van-tab {
-        color: $red;
-        border-right: 1px solid $red;
-        line-height: calc($van-tabs-card-height - 2px);
+        color: @red;
+        border-right: 1px solid @red;
+        line-height: @van-tabs-card-height - 2px;
 
         &:last-child {
           border-right: none;
         }
 
         &.van-tab--active {
-          color: $white;
-          background-color: $red;
+          color: @white;
+          background-color: @red;
         }
       }
     }
@@ -71,22 +71,22 @@ $van-tabs-card-height: 30px;
     bottom: 0;
     height: 2px;
     position: absolute;
-    background-color: $red;
+    background-color: @red;
   }
 
   &--line {
-    padding-top: $van-tabs-line-height;
+    padding-top: @van-tabs-line-height;
 
     .van-tabs__wrap {
-      height: $van-tabs-line-height;
+      height: @van-tabs-line-height;
     }
   }
 
   &--card {
-    padding-top: $van-tabs-card-height;
+    padding-top: @van-tabs-card-height;
 
     .van-tabs__wrap {
-      height: $van-tabs-card-height;
+      height: @van-tabs-card-height;
     }
   }
 }
@@ -97,11 +97,11 @@ $van-tabs-card-height: 30px;
   padding: 0 5px;
   font-size: 14px;
   position: relative;
-  color: $text-color;
-  line-height: $van-tabs-line-height;
+  color: @text-color;
+  line-height: @van-tabs-line-height;
   text-align: center;
   box-sizing: border-box;
-  background-color: $white;
+  background-color: @white;
   min-width: 0; /* hack for flex ellipsis */
 
   span {
@@ -109,10 +109,10 @@ $van-tabs-card-height: 30px;
   }
 
   &--active {
-    color: $red;
+    color: @red;
   }
 
   &--disabled {
-    color: $gray;
+    color: @gray;
   }
 }

packages/tag/index.less

@@ -1,5 +1,5 @@
-@import '../common/style/var.css';
-@import '../common/style/hairline.css';
+@import '../common/style/var.less';
+@import '../common/style/hairline.less';
 
 .van-tag {
   display: inline-block;
@@ -7,8 +7,8 @@
   line-height: normal;
   border-radius: 3px;
   font-size: 10px;
-  background: $gray;
-  color: $white;
+  background: @gray;
+  color: @white;
 
   &::after {
     border-color: currentColor;
@@ -25,31 +25,31 @@
   }
 
   &--success {
-    background: $green;
+    background: @green;
 
     &.van-tag--plain {
-      color: $green;
+      color: @green;
     }
   }
 
   &--danger {
-    background: $button-danger-background-color;
+    background: @button-danger-background-color;
 
     &.van-tag--plain {
-      color: $button-danger-background-color;
+      color: @button-danger-background-color;
     }
   }
 
   &--primary {
-    background: $blue;
+    background: @blue;
 
     &.van-tag--plain {
-      color: $blue;
+      color: @blue;
     }
   }
 
   &--plain {
-    background: $white;
-    color: $gray;
+    background: @white;
+    color: @gray;
   }
 }

packages/toast/index.less

@@ -1,8 +1,8 @@
-@import '../common/style/var.css';
+@import '../common/style/var.less';
 
 .van-toast {
   display: flex;
-  color: $white;
+  color: @white;
   font-size: 12px;
   line-height: 1.2;
   border-radius: 5px;

packages/tree-select/index.less

@@ -1,5 +1,5 @@
-@import '../common/style/var.css';
-@import '../common/style/ellipsis.css';
+@import '../common/style/var.less';
+@import '../common/style/ellipsis.less';
 
 .tree-select {
   user-select: none;

postcss.config.js

@@ -1,7 +1,5 @@
 module.exports = {
   plugins: {
-    'precss': {},
-    'postcss-calc': {},
     'autoprefixer': {}
   }
 };