[improvement] Tabbar: add less vars (#3124)

packages/style/var.less

@@ -210,6 +210,18 @@
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
 
+// Tabbar
+@tabbar-height: 50px;
+@tabbar-background-color: @white;
+
+// TabbarItem
+@tabbar-item-font-size: 12px;
+@tabbar-item-text-color: @gray-darker;
+@tabbar-item-active-color: @blue;
+@tabbar-item-line-height: 1;
+@tabbar-item-icon-size: 18px;
+@tabbar-item-margin-bottom: 5px;
+
 // Tag
 @tag-padding: .2em .5em;
 @tag-font-size: 10px;

packages/tabbar-item/index.less

@@ -3,17 +3,17 @@
 .van-tabbar-item {
   flex: 1;
   display: flex;
-  line-height: 1;
+  color: @tabbar-item-text-color;
-  font-size: 12px;
+  font-size: @tabbar-item-font-size;
-  color: @gray-darker;
+  line-height: @tabbar-item-line-height;
   align-items: center;
   flex-direction: column;
   justify-content: center;
 
   &__icon {
-    font-size: 18px;
     position: relative;
-    margin-bottom: 5px;
+    font-size: @tabbar-item-icon-size;
+    margin-bottom: @tabbar-item-margin-bottom;
 
     .van-icon {
       display: block;
@@ -34,13 +34,13 @@
     }
 
     img {
-      height: 18px;
       display: block;
+      height: @tabbar-item-icon-size;
     }
   }
 
   &--active {
-    color: @blue;
+    color: @tabbar-item-active-color;
   }
 
   .van-info {

packages/tabbar/index.less

@@ -1,10 +1,10 @@
 @import '../style/var';
 
 .van-tabbar {
-  width: 100%;
-  height: 50px;
   display: flex;
-  background-color: @white;
+  width: 100%;
+  height: @tabbar-height;
+  background-color: @tabbar-background-color;
 
   &--fixed {
     left: 0;