diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index b3358eaae9..6a2554a0c5 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -687,26 +687,8 @@ $--backtop-hover-background-color: map.get(
 
 /* Link
 --------------------------*/
-/// fontSize||Font|1
-$--link-font-size: map.get($--font-size, 'base') !default;
-/// fontWeight||Font|1
-$--link-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--link-default-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--link-default-active-color: $--color-primary !default;
-/// color||Color|0
-$--link-disabled-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--link-primary-font-color: $--color-primary !default;
-/// color||Color|0
-$--link-success-font-color: $--color-success !default;
-/// color||Color|0
-$--link-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--link-danger-font-color: $--color-danger !default;
-/// color||Color|0
-$--link-info-font-color: $--color-info !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/link.scss
 
 /* Calendar
 --------------------------*/
diff --git a/packages/theme-chalk/src/link.scss b/packages/theme-chalk/src/link.scss
index 371c14ae40..ef677994a6 100644
--- a/packages/theme-chalk/src/link.scss
+++ b/packages/theme-chalk/src/link.scss
@@ -1,13 +1,32 @@
+@use "sass:map";
+
 @import 'mixins/mixins';
 @import 'common/var';
 
-$typeMap: (
-  primary: $--link-primary-font-color,
-  danger: $--link-danger-font-color,
-  success: $--link-success-font-color,
-  warning: $--link-warning-font-color,
-  info: $--link-info-font-color,
-);
+$types: primary, success, warning, danger, info;
+
+:root {
+  --el-link-font-size: var(--el-font-size-base);
+  --el-link-font-weight: var(--el-font-weight-primary);
+  --el-link-default-font-color: var(--el-color-text-regular);
+  --el-link-default-active-color: var(--el-color-primary);
+  --el-link-disabled-font-color: var(--el-color-text-placeholder);
+
+  @each $type in $types {
+    --el-link-#{$type}-font-color: var(--el-color-#{$type});
+  }
+}
+
+$--link-font-color: () !default;
+
+@each $type in $types {
+  $--link-font-color: map.merge(
+    $--link-font-color,
+    (
+      $type: map.get($--colors, $type, 'base'),
+    )
+  ) !global;
+}
 
 @include b(link) {
   display: inline-flex;
@@ -20,8 +39,8 @@ $typeMap: (
   outline: none;
   cursor: pointer;
   padding: 0;
-  font-size: $--link-font-size;
-  font-weight: $--link-font-weight;
+  font-size: var(--el-link-font-size);
+  font-weight: var(--el-link-font-weight);
 
   @include when(underline) {
     &:hover:after {
@@ -31,7 +50,7 @@ $typeMap: (
       right: 0;
       height: 0;
       bottom: 0;
-      border-bottom: 1px solid $--link-default-active-color;
+      border-bottom: 1px solid var(--el-link-default-active-color);
     }
   }
 
@@ -46,33 +65,33 @@ $typeMap: (
   }
 
   &.#{$namespace}-link--default {
-    color: $--link-default-font-color;
+    color: var(--el-link-default-font-color);
     &:hover {
-      color: $--link-default-active-color;
+      color: var(--el-link-default-active-color);
     }
     &:after {
-      border-color: $--link-default-active-color;
+      border-color: var(--el-link-default-active-color);
     }
     @include when(disabled) {
-      color: $--link-disabled-font-color;
+      color: var(--el-link-disabled-font-color);
     }
   }
 
-  @each $type, $primaryColor in $typeMap {
+  @each $type in $types {
     &.#{$namespace}-link--#{$type} {
-      color: $primaryColor;
+      color: var(--el-link-#{$type}-font-color);
       &:hover {
-        color: mix($primaryColor, $--color-white, 80%);
+        color: mix(map.get($--link-font-color, $type), $--color-white, 80%);
       }
       &:after {
-        border-color: $primaryColor;
+        border-color: var(--el-link-#{$type}-font-color);
       }
       @include when(disabled) {
-        color: mix($primaryColor, $--color-white, 50%);
+        color: mix(map.get($--link-font-color, $type), $--color-white, 50%);
       }
       @include when(underline) {
         &:hover:after {
-          border-color: $primaryColor;
+          border-color: var(--el-link-#{$type}-font-color);
         }
       }
     }