diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index c8d69bc6fe..b3d215630a 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -835,18 +835,6 @@ $--transfer-item-height: 30px !default;
 /// height||Other|4
 $--transfer-filter-height: 32px !default;
 
-/* Header
-  --------------------------*/
-$--header-padding: 0 20px !default;
-
-/* Footer
---------------------------*/
-$--footer-padding: 0 20px !default;
-
-/* Main
---------------------------*/
-$--main-padding: 20px !default;
-
 /* Timeline
 --------------------------*/
 $--timeline-node-size-normal: 12px !default;
diff --git a/packages/theme-chalk/src/footer.scss b/packages/theme-chalk/src/footer.scss
index 77c17fe8da..3a42438c48 100644
--- a/packages/theme-chalk/src/footer.scss
+++ b/packages/theme-chalk/src/footer.scss
@@ -2,11 +2,12 @@
 @import 'common/var';
 
 :root {
+  --el-footer-padding: 0 20px;
   --el-footer-height: 60px;
 }
 
 @include b(footer) {
-  padding: $--footer-padding;
+  padding: var(--el-footer-padding);
   box-sizing: border-box;
   flex-shrink: 0;
   height: var(--el-footer-height);
diff --git a/packages/theme-chalk/src/header.scss b/packages/theme-chalk/src/header.scss
index eb799a5b59..5688d82abc 100644
--- a/packages/theme-chalk/src/header.scss
+++ b/packages/theme-chalk/src/header.scss
@@ -2,11 +2,12 @@
 @import 'common/var';
 
 :root {
+  --el-header-padding: 0 20px;
   --el-header-height: 60px;
 }
 
 @include b(header) {
-  padding: $--header-padding;
+  padding: var(--el-header-padding);
   box-sizing: border-box;
   flex-shrink: 0;
   height: var(--el-header-height);
diff --git a/packages/theme-chalk/src/main.scss b/packages/theme-chalk/src/main.scss
index 77f1f440fa..30caddeb41 100644
--- a/packages/theme-chalk/src/main.scss
+++ b/packages/theme-chalk/src/main.scss
@@ -1,6 +1,10 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-main-padding: 20px;
+}
+
 @include b(main) {
   // IE11 supports the <main> element partially https://caniuse.com/#search=main
   display: block;
@@ -8,5 +12,5 @@
   flex-basis: auto;
   overflow: auto;
   box-sizing: border-box;
-  padding: $--main-padding;
+  padding: var(--el-main-padding);
 }