element源码（三）色彩、字体、边框与图标

系列文章目录

第一章 element源码（一）简要介绍
第二章 element源码（二）Layout 布局组件
第三章 element源码（三）色彩、字体、边框与图标

---

---

前言

组件库根据项目整体的风格会有统一的主色调，统一的字体及文字尺寸，统一的圆角边框，相同设计风格的图标。在实际开发中参与的人员越多，设计风格越难统一。可以学习一下element在这方面是如何做的。

---

一、颜色

先看一下源码/pages/theme-chalk/src/common/var.scss

$--color-primary: #409EFF !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

1,scss中的mix语法,mix($color1, $color2, $weight)其中weight是一个可选参数，如果不传入，则默认两种颜色按照各50%混合。如果传入了，表示color1的比例为weight，color2的比例为1-weight
2,scss中的!default关键字,该变量有定义用定义的值，无定义使用!default前的值作为默认值
到此就实现了主题色的自定义，主题色的深浅变化，其他辅助色也是同样方式实现。

---

二、字体，边框

源码：packages/theme-chalk/src/common/var.scss
1，分别对于字体，文字大小，行高做出了统一的规范。
2，边框，圆角，投影做出了统一的规范。
是一套具有普遍适用性的规范，在写自己组件库时直接搬就行。引入element的样式后开发时可以用定义好的class提高项目的统一性。

---

三、图标

源码：packages/theme-chalk/src/icon.scss
使用IconFont技术，和自己在项目引入iconfont图标差不多,了解一下即可。