diff --git a/packages/skeleton/index.less b/packages/skeleton/index.less
index fa9925387..da029310f 100644
--- a/packages/skeleton/index.less
+++ b/packages/skeleton/index.less
@@ -7,7 +7,7 @@
   &__avatar {
     flex-shrink: 0;
     margin-right: 15px;
-    background-color: @active-color;
+    background-color: @skeleton-avatar-background-color;
 
     &--round {
       border-radius: 100%;
@@ -24,8 +24,8 @@
 
   &__row,
   &__title {
-    height: 16px;
-    background-color: @active-color;
+    height: @skeleton-row-height;
+    background-color: @skeleton-row-background-color;
   }
 
   &__title {
@@ -34,7 +34,7 @@
 
   &__row {
     &:not(:first-child) {
-      margin-top: 12px;
+      margin-top: @skeleton-row-margin-top;
     }
   }
 
@@ -43,7 +43,7 @@
   }
 
   &--animate {
-    animation: van-skeleton-blink 1.2s ease-in-out infinite;
+    animation: van-skeleton-blink @skeleton-animation-duration ease-in-out infinite;
   }
 }
 
diff --git a/packages/style/var.less b/packages/style/var.less
index c254ce679..d20fd50a6 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -245,6 +245,13 @@
 @sidebar-selected-border-color: @red;
 @sidebar-selected-background-color: @white;
 
+// Skeleton
+@skeleton-row-height: 16px;
+@skeleton-row-background-color: @active-color;
+@skeleton-row-margin-top: 12px;
+@skeleton-avatar-background-color: @active-color;
+@skeleton-animation-duration: 1.2s;
+
 // Slider
 @slider-active-background-color: @blue;
 @slider-inactive-background-color: @gray-light;