diff --git a/packages/style/var.less b/packages/style/var.less
index 4c9bcf2d9..f470ee6f6 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -247,7 +247,12 @@
 @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
 
 // Swipe
-@swipe-indicator: 6px;
+@swipe-indicator-size: 6px;
+@swipe-indicator-margin: 10px;
+@swipe-indicator-active-opacity: 1;
+@swipe-indicator-inactive-opacity: .3;
+@swipe-indicator-active-background-color: @blue;
+@swipe-indicator-inactive-background-color: @border-color;
 
 // Switch
 @switch-width: 2em;
diff --git a/packages/swipe/index.less b/packages/swipe/index.less
index fd0d1b106..3221d4c37 100644
--- a/packages/swipe/index.less
+++ b/packages/swipe/index.less
@@ -13,37 +13,37 @@
     display: flex;
     position: absolute;
     left: 50%;
-    bottom: 10px;
+    bottom: @swipe-indicator-margin;
     transform: translateX(-50%);
 
     &--vertical {
-      left: 10px;
+      left: @swipe-indicator-margin;
       top: 50%;
       bottom: auto;
       flex-direction: column;
       transform: translateY(-50%);
 
       .van-swipe__indicator:not(:last-child) {
-        margin-bottom: @swipe-indicator;
+        margin-bottom: @swipe-indicator-size;
       }
     }
   }
 
   &__indicator {
-    opacity: .3;
     border-radius: 100%;
-    width: @swipe-indicator;
-    height: @swipe-indicator;
+    opacity: @swipe-indicator-inactive-opacity;
+    width: @swipe-indicator-size;
+    height: @swipe-indicator-size;
+    background-color: @swipe-indicator-inactive-background-color;
     transition: opacity .2s;
-    background-color: @border-color;
 
     &:not(:last-child) {
-      margin-right: @swipe-indicator;
+      margin-right: @swipe-indicator-size;
     }
 
     &--active {
-      opacity: 1;
-      background-color: @blue;
+      opacity: @swipe-indicator-active-opacity;
+      background-color: @swipe-indicator-active-background-color;
     }
   }
 }