diff --git a/packages/notice-bar/index.less b/packages/notice-bar/index.less
index 118f3efe0..e0d9741fa 100644
--- a/packages/notice-bar/index.less
+++ b/packages/notice-bar/index.less
@@ -4,17 +4,17 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: 40px;
-  padding: 0 15px;
-  color: @orange-dark;
-  font-size: 14px;
-  line-height: 24px;
-  background-color: @orange-light;
+  height: @notice-bar-height;
+  padding: @notice-bar-padding;
+  color: @notice-bar-text-color;
+  font-size: @notice-bar-font-size;
+  line-height: @notice-bar-line-height;
+  background-color: @notice-bar-background-color;
 
   &__left-icon,
   &__right-icon {
-    min-width: 22px;
-    font-size: 16px;
+    min-width: @notice-bar-icon-min-width;
+    font-size: @notice-bar-icon-size;
   }
 
   &__right-icon {
@@ -24,7 +24,7 @@
   &__wrap {
     position: relative;
     flex: 1;
-    height: 24px;
+    height: @notice-bar-line-height;
     overflow: hidden;
   }
 
@@ -47,7 +47,7 @@
 
   &--wrapable {
     height: auto;
-    padding: 8px 15px;
+    padding: @notice-bar-wrapable-padding;
 
     .van-notice-bar {
       &__wrap {
diff --git a/packages/style/var.less b/packages/style/var.less
index bc7d0dc60..572da03b2 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -285,6 +285,17 @@
 @nav-bar-title-font-size: 16px;
 @nav-bar-title-text-color: @text-color;
 
+// NoticeBar
+@notice-bar-height: 40px;
+@notice-bar-padding: 0 15px;
+@notice-bar-wrapable-padding: 8px 15px;
+@notice-bar-text-color: @orange-dark;
+@notice-bar-font-size: 14px;
+@notice-bar-line-height: 24px;
+@notice-bar-background-color: @orange-light;
+@notice-bar-icon-size: 16px;
+@notice-bar-icon-min-width: 22px;
+
 // Notify
 @notify-padding: 6px 15px;
 @notify-font-size: 14px;