diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 5773eeabe7..118d981c5c 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -539,14 +539,8 @@ $--slider-button-wrapper-offset: -15px !default;
 
 /* Menu
 --------------------------*/
-/// fontSize||Font|1
-$--menu-item-font-size: map.get($--font-size, 'base') !default;
-/// color||Color|0
-$--menu-item-font-color: $--color-text-primary !default;
-/// color||Color|0
-$--menu-background-color: $--color-white !default;
-$--menu-item-hover-fill: map.get($--colors, 'primary', 'light-9') !default;
-$--menu-border-color: #e6e6e6 !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/menu.scss
 
 /* Rate
 --------------------------*/
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index 296a5bf922..c1058ab260 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -4,11 +4,19 @@
 @import 'common/transition';
 @import 'tooltip';
 
+:root {
+  --el-menu-item-font-size: var(--el-font-size-base);
+  --el-menu-item-font-color: var(--el-color-text-primary);
+  --el-menu-background-color: var(--el-color-white);
+  --el-menu-item-hover-fill: var(--el-color-primary-light-9);
+  --el-menu-border-color: #e6e6e6;
+}
+
 @mixin menu-item {
   height: 56px;
   line-height: 56px;
-  font-size: $--menu-item-font-size;
-  color: $--menu-item-font-color;
+  font-size: var(--el-menu-item-font-size);
+  color: var(--el-menu-item-font-color);
   padding: 0 20px;
   list-style: none;
   cursor: pointer;
@@ -30,7 +38,7 @@
   &:hover,
   &:focus {
     outline: none;
-    background-color: $--menu-item-hover-fill;
+    background-color: var(--el-menu-item-hover-fill);
   }
 
   @include when(disabled) {
@@ -41,15 +49,15 @@
 }
 
 @include b(menu) {
-  border-right: solid 1px $--menu-border-color;
+  border-right: solid 1px var(--el-menu-border-color);
   list-style: none;
   position: relative;
   margin: 0;
   padding-left: 0;
-  background-color: $--menu-background-color;
+  background-color: var(--el-menu-background-color);
   @include utils-clearfix;
   &.#{$namespace}-menu--horizontal {
-    border-bottom: solid 1px $--menu-border-color;
+    border-bottom: solid 1px var(--el-menu-border-color);
   }
 
   @include m(horizontal) {
@@ -219,7 +227,7 @@
     @include menu-item;
 
     &:hover {
-      background-color: $--menu-item-hover-fill;
+      background-color: var(--el-menu-item-hover-fill);
     }
   }
   & .#{$namespace}-menu {