diff --git a/packages/step/index.less b/packages/step/index.less
index 7ff24d6ca..f5ed1eb85 100644
--- a/packages/step/index.less
+++ b/packages/step/index.less
@@ -3,17 +3,22 @@
 .van-step {
   position: relative;
   flex: 1;
-  color: @gray-dark;
-  font-size: 14px;
+  color: @step-text-color;
+  font-size: @step-font-size;
 
   &__circle {
     display: block;
-    width: 5px;
-    height: 5px;
-    background-color: @gray-dark;
+    width: @step-circle-size;
+    height: @step-circle-size;
+    background-color: @step-circle-color;
     border-radius: 50%;
   }
 
+  &__line {
+    position: absolute;
+    background-color: @step-line-color;
+  }
+
   &--horizontal {
     float: left;
 
@@ -53,30 +58,28 @@
     .van-step__title {
       display: inline-block;
       margin-left: 3px;
-      font-size: 12px;
+      font-size: @step-horizontal-title-font-size;
       transform: translateX(-50%);
 
       @media (max-width: 321px) {
-        font-size: 11px;
+        font-size: @step-horizontal-title-font-size - 1px;
       }
     }
 
     .van-step__line {
-      position: absolute;
       top: 30px;
       left: 0;
       width: 100%;
       height: 1px;
-      background-color: @border-color;
     }
 
     .van-step__icon {
       display: block;
-      font-size: 12px;
+      font-size: @step-icon-size;
     }
 
     .van-step--process {
-      color: @text-color;
+      color: @step-process-text-color;
     }
   }
 
@@ -84,7 +87,6 @@
     display: block;
     float: none;
     padding: 10px 10px 10px 0;
-    font-size: 14px;
     line-height: 18px;
 
     &:not(:last-child)::after {
@@ -109,18 +111,16 @@
       top: 19px;
       left: -15px;
       z-index: 2;
-      font-size: 12px;
+      font-size: @step-icon-size;
       line-height: 1;
       transform: translate(-50%, -50%);
     }
 
     .van-step__line {
-      position: absolute;
       top: 16px;
       left: -15px;
       width: 1px;
       height: 100%;
-      background-color: @border-color;
     }
   }
 
@@ -131,11 +131,11 @@
   }
 
   &--finish {
-    color: @text-color;
+    color: @step-finish-text-color;
 
     .van-step__circle,
     .van-step__line {
-      background-color: @green;
+      background-color: @step-finish-line-color;
     }
   }
 }
diff --git a/packages/steps/index.less b/packages/steps/index.less
index b131a25a4..d5f819c9f 100644
--- a/packages/steps/index.less
+++ b/packages/steps/index.less
@@ -2,7 +2,7 @@
 
 .van-steps {
   overflow: hidden;
-  background-color: @white;
+  background-color: @steps-background-color;
 
   &--horizontal {
     padding: 10px 10px 0;
diff --git a/packages/style/var.less b/packages/style/var.less
index fd327c479..29266cd4b 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -434,6 +434,21 @@
 @slider-button-background-color: @white;
 @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
 
+// Step
+@step-text-color: @gray-dark;
+@step-process-text-color: @text-color;
+@step-font-size: 14px;
+@step-line-color: @border-color;
+@step-finish-line-color: @green;
+@step-finish-text-color: @text-color;
+@step-icon-size: 12px;
+@step-circle-size: 5px;
+@step-circle-color: @gray-dark;
+@step-horizontal-title-font-size: 12px;
+
+// Steps
+@steps-background-color: @white;
+
 // Stepper
 @stepper-active-color: #e8e8e8;
 @stepper-background-color: @active-color;