diff --git a/packages/picker/index.less b/packages/picker/index.less
index 122198691..c6da47a2f 100644
--- a/packages/picker/index.less
+++ b/packages/picker/index.less
@@ -3,32 +3,32 @@
 .van-picker {
   position: relative;
   overflow: hidden;
-  background-color: @white;
+  background-color: @picker-background-color;
   user-select: none;
   -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
 
   &__toolbar {
     display: flex;
     justify-content: space-between;
-    height: 44px;
-    line-height: 44px;
+    height: @picker-toolbar-height;
+    line-height: @picker-toolbar-height;
   }
 
   &__cancel,
   &__confirm {
-    padding: 0 15px;
-    color: @blue;
-    font-size: 14px;
+    padding: @picker-action-padding;
+    color: @picker-action-text-color;
+    font-size: @picker-action-font-size;
 
     &:active {
-      background-color: @active-color;
+      background-color: @picker-action-active-color;
     }
   }
 
   &__title {
     max-width: 50%;
     font-weight: 500;
-    font-size: 16px;
+    font-size: @picker-title-font-size;
     text-align: center;
   }
 
@@ -64,20 +64,20 @@
   &-column {
     flex: 1;
     overflow: hidden;
-    font-size: 16px;
+    font-size: @picker-option-font-size;
     text-align: center;
 
     &__item {
       padding: 0 5px;
-      color: @gray-dark;
+      color: @picker-option-text-color;
 
       &--selected {
-        color: @text-color;
+        color: @picker-option-selected-text-color;
         font-weight: 500;
       }
 
       &--disabled {
-        opacity: .3;
+        opacity: @picker-option-disabled-opacity;
       }
     }
   }
diff --git a/packages/popup/index.less b/packages/popup/index.less
index cb470e50c..cb30426ff 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -9,8 +9,8 @@
     position: fixed;
     max-height: 100%;
     overflow-y: auto;
-    background-color: @white;
-    transition: .3s ease-out;
+    background-color: @popup-background-color;
+    transition: @popup-transition;
     -webkit-overflow-scrolling: touch;
 
     &--center {
diff --git a/packages/style/var.less b/packages/style/var.less
index 1b9afa4c8..275a39d43 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -346,6 +346,23 @@
 @password-input-dot-size: 10px;
 @password-input-dot-color: @black;
 
+// Picker
+@picker-background-color: @white;
+@picker-toolbar-height: 44px;
+@picker-title-font-size: 16px;
+@picker-action-padding: 0 15px;
+@picker-action-font-size: 14px;
+@picker-action-text-color: @blue;
+@picker-action-active-color: @active-color;
+@picker-option-font-size: 16px;
+@picker-option-text-color: @gray-dark;
+@picker-option-selected-text-color: @text-color;
+@picker-option-disabled-opacity: .3;
+
+// Popup
+@popup-background-color: @white;
+@popup-transition: .3s ease-out;
+
 // Radio
 @radio-size: 20px;
 @radio-border-color: @gray-light;