From 912cb45e1145426fbb5137cd055df1746435eb36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Wed, 21 Jul 2021 22:51:41 +0800
Subject: [PATCH] refactor(avatar): migrate css var (#2601)

---
 packages/theme-chalk/src/avatar.scss        | 49 +++++++++++----------
 packages/theme-chalk/src/common/var.scss    | 18 +-------
 packages/theme-chalk/src/skeleton-item.scss | 12 +++--
 3 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/packages/theme-chalk/src/avatar.scss b/packages/theme-chalk/src/avatar.scss
index 6f8293f8b3..1a37bae94d 100644
--- a/packages/theme-chalk/src/avatar.scss
+++ b/packages/theme-chalk/src/avatar.scss
@@ -1,17 +1,28 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-avatar-font-color: #fff;
+  --el-avatar-background-color: #c0c4cc;
+  --el-avatar-text-font-size: 14px;
+  --el-avatar-icon-font-size: 18px;
+  --el-avatar-border-radius: var(--el-border-radius-base);
+  --el-avatar-large-size: 40px;
+  --el-avatar-medium-size: 36px;
+  --el-avatar-small-size: 28px;
+}
+
 @include b(avatar) {
   display: inline-block;
   box-sizing: border-box;
   text-align: center;
   overflow: hidden;
-  color: $--avatar-font-color;
-  background: $--avatar-background-color;
-  width: $--avatar-large-size;
-  height: $--avatar-large-size;
-  line-height: $--avatar-large-size;
-  font-size: $--avatar-text-font-size;
+  color: var(--el-avatar-font-color);
+  background: var(--el-avatar-background-color);
+  width: var(--el-avatar-large-size);
+  height: var(--el-avatar-large-size);
+  line-height: var(--el-avatar-large-size);
+  font-size: var(--el-avatar-text-font-size);
 
   > img {
     display: block;
@@ -24,28 +35,18 @@
   }
 
   @include m(square) {
-    border-radius: $--avatar-border-radius;
+    border-radius: var(--el-avatar-border-radius);
   }
 
   @include m(icon) {
-    font-size: $--avatar-icon-font-size;
+    font-size: var(--el-avatar-icon-font-size);
   }
 
-  @include m(large) {
-    width: $--avatar-large-size;
-    height: $--avatar-large-size;
-    line-height: $--avatar-large-size;
-  }
-
-  @include m(medium) {
-    width: $--avatar-medium-size;
-    height: $--avatar-medium-size;
-    line-height: $--avatar-medium-size;
-  }
-
-  @include m(small) {
-    width: $--avatar-small-size;
-    height: $--avatar-small-size;
-    line-height: $--avatar-small-size;
+  @each $size in (small, medium, large) {
+    @include m($size) {
+      width: var(--el-avatar-#{$size}-size);
+      height: var(--el-avatar-#{$size}-size);
+      line: var(--el-avatar-#{$size}-size);
+    }
   }
 }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 70f0c4d50c..b3358eaae9 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -720,22 +720,8 @@ $--form-label-font-size: map.get($--font-size, 'base') !default;
 
 /* Avatar
 --------------------------*/
-/// color||Color|0
-$--avatar-font-color: #fff !default;
-/// color||Color|0
-$--avatar-background-color: #c0c4cc !default;
-/// fontSize||Font Size|1
-$--avatar-text-font-size: 14px !default;
-/// fontSize||Font Size|1
-$--avatar-icon-font-size: 18px !default;
-/// borderRadius||Border|2
-$--avatar-border-radius: $--border-radius-base !default;
-/// size|1|Avatar Size|3
-$--avatar-large-size: 40px !default;
-/// size|1|Avatar Size|3
-$--avatar-medium-size: 36px !default;
-/// size|1|Avatar Size|3
-$--avatar-small-size: 28px !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/avatar.scss
 
 /* Empty
 -------------------------- */
diff --git a/packages/theme-chalk/src/skeleton-item.scss b/packages/theme-chalk/src/skeleton-item.scss
index 1469482abc..a513e107eb 100644
--- a/packages/theme-chalk/src/skeleton-item.scss
+++ b/packages/theme-chalk/src/skeleton-item.scss
@@ -1,6 +1,12 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  @each $size in (small, medium, large) {
+    --el-skeleton-avatar-#{$size}-size: var(--el-avatar-#{$size}-size);
+  }
+}
+
 @mixin circle-size($size) {
   width: $size;
   height: $size;
@@ -18,14 +24,14 @@
 
   @include e(circle) {
     border-radius: 50%;
-    @include circle-size($--avatar-medium-size);
+    @include circle-size(var(--el-skeleton-avatar-medium-size));
 
     @include m(lg) {
-      @include circle-size($--avatar-large-size);
+      @include circle-size(var(--el-skeleton-avatar-large-size));
     }
 
     @include m(md) {
-      @include circle-size($--avatar-small-size);
+      @include circle-size(var(--el-skeleton-avatar-small-size));
     }
   }