Element-UI 技術揭祕（5）- 色彩、字體、邊框與圖標

前言

element-ui 組件庫之因此受歡迎，除了組件豐富，文檔友好以外，還得益於它的精美的設計。以前在組件庫的總體設計文章中提到，element-ui 背後有一隻強大的設計團隊，他們爲組件庫了制定了一套設計規範。

需求分析

當咱們去設計一套組件庫的時候，首先要考慮顏色、字體、邊框、圖標這些基礎元素的設計，它們是構建各個組件的基石，若是沒有作好這些基礎設計，那麼作出來的組件庫看上去必定很山寨。

這些基礎設計都須要遵循必定的設計規範，經驗豐富的設計師在設計的時候會制定一套規範，那做爲程序員的咱們在實現這套設計規範的時候，在代碼層面也能夠遵循必定的規範。

設計與實現

那麼接下來，咱們從代碼的角度依次來介紹這四個基礎元素在的設計與實現。

色彩

Element 爲了不視覺傳達差別，使用一套特定的調色板來規定顏色，爲你所搭建的產品提供一致的外觀視覺感覺。

主色

Element 主要品牌顏色是鮮豔、友好的藍色。

如圖所示，element-ui 提供了一套藍色系的顏色，能夠看到除了主色 #409EFF 以外，還有一系列漸變的藍色，那麼在代碼中是如何實現的呢？

element-ui 關於顏色的定義在 packages/theme-chalk/src/common/var.scss 中：

$--color-primary: #409EFF !default;
複製代碼

這裏定義了 $--color-primary 變量，值爲 #409EFF,注意這裏用了 !default 關鍵字，它在這裏的含義是若是外面已經定義了 $--color-primary，那麼就用已經定義的值，不然賦值爲 #409EFF。這麼作的緣由應該是和自定義主題色相關，若是用戶定義了新的主題色，該變量就能夠指向新的主題顏色。

對於主題藍色的漸變色，element-ui 的實現以下：

$--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 */
複製代碼

這裏定義了 9 個變量，都使用了 mix 函數，mix 函數是 sass 中內置的函數，它表示 2 種顏色的混合，第三個參數表示 2 種顏色混合各自佔的比例，以 mix($--color-white, $--color-primary, 10%) 爲例，表示 $--color-white（白色）佔比 10%，而 $--color-primary（主色）佔比 90%。

經過這種方式，element-ui 輕鬆實現了不一樣顏色深度的主色。

輔助色

除了主色外的場景色，須要在不一樣的場景中使用（例如危險色表示危險的操做）。

這些輔助色的實現也是大同小異，咱們以成功色爲例，其他再也不贅述。

$--color-success: #67C23A !default;

$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
複製代碼

也是經過 mix 混入白色的方式，生成不一樣顏色深度的成功色。

中性色

中性色用於文本、背景和邊框顏色。經過運用不一樣的中性色，來表現層次結構。

關於文本顏色，由深到淺定義了四個變量：

/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
/// color|1|Font Color|2
$--color-text-regular: #606266 !default;
/// color|1|Font Color|2
$--color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #C0C4CC !default;
複製代碼

關於邊框顏色，由深到淺定義了四個變量：

/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;
複製代碼

關於背景色，定義了三個變量：

/// color|1|Background Color|4
$--color-black: #000000 !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--background-color-base: #F5F7FA !default;
複製代碼

注意這裏的第三個變量和圖中透明色表示不一樣，由於透明背景理論上是不須要配置 background 的，默認就是透明的。這裏第三個變量也表示一種基礎白色，在多個組件中使用。

字體

element-ui 對字體進行統一規範，力求在各個操做系統下都有最佳展現效果。

字體

圖中展現了多種字體的樣式，其中有咱們 mac 用戶比較熟悉的 PingFang SC，還有一些 win 用戶熟悉的 MicroSoft YaHei。

在 packages/theme-chalk/src/reset.scss 中定義了全局的字體樣式：

body {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif;
  font-weight: 400;
  font-size: $--font-size-base;
  color: $--color-black;
  -webkit-font-smoothing: antialiased;
}
複製代碼

咱們知道 font-family 能夠指定一個字體列表，屬性值用逗號隔開，瀏覽器會選擇列表中第一個該計算機上有安裝的字體。

字號

element-ui 定義了 6 種大小的字體，它們的定義在 packages/theme-chalk/src/common/var.scss 中：

/// fontSize|1|Font Size|0
$--font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$--font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$--font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$--font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$--font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$--font-size-extra-small: 12px !default;
複製代碼

其中最小是 12px，最大是 20px。一般在設計是不建議出現小於 12px 大小的字體的，過小的字體會對視力很差的人羣是不友好的。

行高

如圖所示，一般咱們在遇到多行文字的時候，設置不一樣的 line-height 會有不一樣的渲染效果，通常設置至少爲 1.5。這將有助於改善低可視條件下的體驗，也對認知阻礙者（如閱讀困難者）有幫助。

element-ui 在 packages/theme-chalk/src/common/var.scss 中只定義了 2 種行高：

/// fontLineHeight|1|Line Height|2
$--font-line-height-primary: 24px !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-secondary: 16px !default;
複製代碼

element-ui 在大部分組件的實現中直接寫死了行高的大小，不過一般更好的方式是使用無單位的值而不是具體的大小，由於一旦你更改了字體大小，若是用無單位值就不須要再手動改行高了。另一特定場景是若是文字的大小要隨頁面的縮放而變化，使用無單位的值能夠確保行高也會等比例縮放。

邊框

element-ui 對邊框進行統一規範，可用於按鈕、卡片、彈窗等組件裏。

邊框和圓角

element-ui 提供了一系列關於邊框的圓角樣式的定義，在 packages/theme-chalk/src/common/var.scss 中：

/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;

$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
/// borderRadius|1|Radius|0
$--border-radius-base: 4px !default;
/// borderRadius|1|Radius|0
$--border-radius-small: 2px !default;
/// borderRadius|1|Radius|0
$--border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0
$--border-radius-zero: 0 !default;s
複製代碼

其中包括了邊框的粗細、顏色、樣式，圓角大小等變量，還包括了 hover 的顏色，用在組件中。

投影

element-ui 提供了幾種經常使用的投影方式，定義在 packages/theme-chalk/src/common/var.scss 中：

/// boxShadow|1|Shadow|1
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
// boxShadow|1|Shadow|1
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
/// boxShadow|1|Shadow|1
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
複製代碼

若是對 box-shadow 相關屬性值不太理解的同窗，能夠去 mdn 上自行查閱相關資料學習；也能夠在線調試它的屬性值，看看不一樣的渲染效果。

圖標

element-ui 提供了一套經常使用的圖標集合。

使用方法

直接經過設置類名爲 el-icon-iconName 來使用便可。例如：

對應代碼：

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
複製代碼

咱們只須要簡單設置類名便可引入這些字體圖標了（關於 button 的實現下一篇文章會提到），這是如何作到的呢？

實現方式

其實 element-ui 提供的圖標是利用 IconFont 技術實現的，在 packages/theme-chalk/src/icon.scss 中定義：

@font-face {
  font-family: 'element-icons';
  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-display: $--font-display;
  font-style: normal;
}

[class^="el-icon-"], [class*=" el-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'element-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-icon-edit:before {
  content: "\e78c";
}

// ...
複製代碼

首先，利用 @font-face 定義了自定義字體，它的來源是 packages/theme-chalk/src/fonts/ 目錄中定義的字體圖標文件。

其次，利用屬性選擇器篩選了以 el-icon- 開頭或者是帶有 el-icon- 的類名的元素，它們對應的 font-family 就是自定義字體 element-icons。

而後對應不一樣的圖標，定義不一樣的 el-icon-xxx 類名，並經過 before 僞類指定對應的 content 值，這樣用戶只須要使用 el-icon-xxx 的類名就能夠引用相應的圖標。

最後推薦 2 個製做字體圖標庫的網站，Iconfont 和 icomoon。

總結

這篇文章整體來講仍是很簡單的，對於設計師提供的設計規範，element-ui 主要的實現方式是在公共的 sass 文件中定義了不少變量，將來組件中的樣式就會引入這些變量，至關於編程的方式去書寫 CSS，而不會在每一個組件內部去寫死字體、顏色、邊框的值。這樣的好處不只語義化強，並且維護性好，一旦這些基礎元素的設計改變，我能夠只去修改這些變量值就能夠，而不用去修改組件，另外對於組件總體的自定義主題設計也是提供了很是大的便利。

學習完這篇文章，你也能夠在本身的項目中嘗試去定義公共的樣式文件和變量，而後在組件中去引入它們。固然若是你的組件庫支持了後編譯，你甚至能夠直接去引入組件庫中定義的變量。

把不會的東西學會了，那麼你就進步了，若是你以爲這類文章有幫助，也歡迎把它推薦給你身邊的小夥伴。

下一篇預告 ：Element-UI 技術揭祕（6）- Button 按鈕組件。

歡迎關注個人公衆號「老黃的前端私房菜」，《Element-UI 技術揭祕》系列文章會第一時間在公衆號更新和發佈，除此以外，我還會常常分享一些前端進階知識，乾貨，也會偶爾分享一些軟素質技能。