diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 9a20337187..50ca7e486e 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -336,8 +336,6 @@ $--message-background-color: #edf2fc !default;
 $--message-padding: 15px 15px 15px 20px !default;
 /// color||Color|0
 $--message-close-icon-color: $--color-text-placeholder !default;
-/// height||Other|4
-$--message-close-size: 16px !default;
 /// color||Color|0
 $--message-close-hover-color: $--color-text-secondary !default;
 
@@ -352,39 +350,8 @@ $--message-danger-font-color: $--color-danger !default;
 
 /* Notification
 -------------------------- */
-$--notification-width: 330px !default;
-/// padding||Spacing|3
-$--notification-padding: 14px 26px 14px 13px !default;
-$--notification-radius: 8px !default;
-$--notification-shadow: $--box-shadow-light !default;
-/// color||Color|0
-$--notification-border-color: map.get($--border-color, 'lighter') !default;
-$--notification-icon-size: 24px !default;
-$--notification-close-font-size: $--message-close-size !default;
-$--notification-group-margin-left: 13px !default;
-$--notification-group-margin-right: 8px !default;
-/// fontSize||Font|1
-$--notification-content-font-size: map.get($--font-size, 'base') !default;
-/// color||Color|0
-$--notification-content-color: $--color-text-regular !default;
-/// fontSize||Font|1
-$--notification-title-font-size: 16px !default;
-/// color||Color|0
-$--notification-title-color: $--color-text-primary !default;
-
-/// color||Color|0
-$--notification-close-color: $--color-text-secondary !default;
-/// color||Color|0
-$--notification-close-hover-color: $--color-text-regular !default;
-
-/// color||Color|0
-$--notification-success-icon-color: $--color-success !default;
-/// color||Color|0
-$--notification-info-icon-color: $--color-info !default;
-/// color||Color|0
-$--notification-warning-icon-color: $--color-warning !default;
-/// color||Color|0
-$--notification-danger-icon-color: $--color-danger !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/notification.scss
 
 /* Input
 -------------------------- */
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index 3f9a12d5f9..843dad1adb 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -45,7 +45,7 @@
     border: none;
     outline: none;
     cursor: pointer;
-    font-size: $--message-close-size;
+    font-size: var(--el-message-close-size);
 
     .#{$namespace}-dialog__close {
       color: $--color-info;
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
index 7dcb92a0ac..a4e300320c 100644
--- a/packages/theme-chalk/src/message-box.scss
+++ b/packages/theme-chalk/src/message-box.scss
@@ -52,7 +52,7 @@
     border: none;
     outline: none;
     background: transparent;
-    font-size: $--message-close-size;
+    font-size: var(--el-message-close-size);
     cursor: pointer;
 
     .#{$namespace}-message-box__close {
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index 1a97579bba..e49de19dbf 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -88,7 +88,7 @@
     transform: translateY(-50%);
     cursor: pointer;
     color: $--message-close-icon-color;
-    font-size: $--message-close-size;
+    font-size: var(--el-message-close-size);
 
     &:focus {
       outline-width: 0;
diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss
index 32ff7a4987..1ebdddf49c 100644
--- a/packages/theme-chalk/src/notification.scss
+++ b/packages/theme-chalk/src/notification.scss
@@ -1,16 +1,39 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-notification-width: 330px;
+  --el-notification-padding: 14px 26px 14px 13px;
+  --el-notification-radius: 8px;
+  --el-notification-shadow: var(--el-box-shadow-light);
+  --el-notification-border-color: var(--el-border-color-lighter);
+  --el-notification-icon-size: 24px;
+  --el-notification-close-font-size: var(--el-message-close-size);
+
+  --el-notification-group-margin-left: 13px;
+  --el-notification-group-margin-right: 8px;
+  --el-notification-content-font-size: var(--el-font-size-base);
+  --el-notification-content-color: var(--el-color-text-regular);
+  --el-notification-title-font-size: 16px;
+  --el-notification-title-color: var(--el-color-text-primary);
+  --el-notification-close-color: var(--el-color-text-secondary);
+  --el-notification-close-hover-color: var(--el-color-text-regular);
+
+  @each $type in (success, info, warning, danger) {
+    --el-notification-#{$type}-icon-color: var(--el-color-#{$type});
+  }
+}
+
 @include b(notification) {
   display: flex;
-  width: $--notification-width;
-  padding: $--notification-padding;
-  border-radius: $--notification-radius;
+  width: var(--el-notification-width);
+  padding: var(--el-notification-padding);
+  border-radius: var(--el-notification-radius);
   box-sizing: border-box;
-  border: 1px solid $--notification-border-color;
+  border: 1px solid var(--el-notification-border-color);
   position: fixed;
-  background-color: $--color-white;
-  box-shadow: $--notification-shadow;
+  background-color: var(--el-color-white);
+  box-shadow: var(--el-notification-shadow);
   transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
     bottom 0.3s;
   overflow-wrap: anywhere;
@@ -26,23 +49,23 @@
   }
 
   @include e(group) {
-    margin-left: $--notification-group-margin-left;
-    margin-right: $--notification-group-margin-right;
+    margin-left: var(--el-notification-group-margin-left);
+    margin-right: var(--el-notification-group-margin-right);
   }
 
   @include e(title) {
     font-weight: bold;
-    font-size: $--notification-title-font-size;
-    line-height: $--notification-icon-size;
-    color: $--notification-title-color;
+    font-size: var(--el-notification-title-font-size);
+    line-height: var(--el-notification-icon-size);
+    color: var(--el-notification-title-color);
     margin: 0;
   }
 
   @include e(content) {
-    font-size: $--notification-content-font-size;
+    font-size: var(--el-notification-content-font-size);
     line-height: 24px;
     margin: 6px 0 0 0;
-    color: $--notification-content-color;
+    color: var(--el-notification-content-color);
     text-align: justify;
 
     p {
@@ -51,9 +74,9 @@
   }
 
   @include e(icon) {
-    height: $--notification-icon-size;
-    width: $--notification-icon-size;
-    font-size: $--notification-icon-size;
+    height: var(--el-notification-icon-size);
+    width: var(--el-notification-icon-size);
+    font-size: var(--el-notification-icon-size);
   }
 
   @include e(closeBtn) {
@@ -61,28 +84,21 @@
     top: 18px;
     right: 15px;
     cursor: pointer;
-    color: $--notification-close-color;
-    font-size: $--notification-close-font-size;
+    color: var(--el-notification-close-color);
+    font-size: var(--el-notification-close-font-size);
 
     &:hover {
-      color: $--notification-close-hover-color;
+      color: var(--el-notification-close-hover-color);
     }
   }
 
-  .#{$namespace}-icon-success {
-    color: $--notification-success-icon-color;
-  }
-
-  .#{$namespace}-icon-error {
-    color: $--notification-danger-icon-color;
-  }
-
-  .#{$namespace}-icon-info {
-    color: $--notification-info-icon-color;
-  }
-
-  .#{$namespace}-icon-warning {
-    color: $--notification-warning-icon-color;
+  @each $type in (success, info, warning, error) {
+    .#{$namespace}-icon-#{$type} {
+      @if $type == error {
+        $type: danger;
+      }
+      color: var(--el-notification-#{$type}-icon-color);
+    }
   }
 }
 
diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
index 39c73d51cf..d2731520ff 100644
--- a/packages/theme-chalk/src/var.scss
+++ b/packages/theme-chalk/src/var.scss
@@ -71,4 +71,8 @@
   --el-disabled-fill-base: var(--el-background-color-base);
   --el-disabled-color-base: var(--el-color-text-placeholder);
   --el-disabled-border-base: var(--el-border-color-light);
+
+  // some var for component, but because they are used in many places, need to be global
+  // message
+  --el-message-close-size: 16px;
 }