element-ui默認主題二次開發小記

element-theme-default 語法解析

我fork了官方的倉庫，方便進行二次開發： https://github.com/Molunerfinn/theme-default

element-theme-default 提供的工具和文檔只能經過修改 element-variables.css 這個文件進行一些局部樣式調整，好比總體的顏色風格，一些長寬、邊距、圓角尺寸等。若是須要進行定製、二次開發的話，單純修改 element-variables.css 是不夠的。還須要修改 element-theme-default 的源碼。在查看 element-theme-default 源碼的時候發現了一些有趣的東西。記錄以下，方便二次開發。

首先是 element-theme-default 採用的是下一代CSS風格的開發方式，用了基於PostCss的 Post-salad 來編譯，而不是我以前認爲的SCSS\LESS等預處理。不過整體而言若是有預處理的經驗，仍是可以很快上手。

幾個顯著特徵：

• 採用var進行全局樣式變量定義
• 支持@import引入外部css
• 支持層級嵌套書寫
• 支持一些獨特的語法

一些獨特的語法列舉以下：

1. @component-namespace 後面跟着的一般是 el ，會通知整個組件的class前綴渲染爲 el

如下的部分是跟在 @component-namespace 層級以後,也就是都在 @component-namespace el {...} 花括號內。

2. @b 後面跟着的class會渲染爲： el-class 。例如：

@b alert{...}

會被渲染爲

el-alert{...}

3. @modifier 或者 @m 後面跟着的class會被渲染爲： --class 。例如：

@b alert{
  @modifier info{...}
  @m warning{...}
}

會被渲染爲

el-alert--info{...}
el-alert--warning{...}

4. @e 後面跟着的class會被渲染爲： __class 。例如：

@b alert{
  @e content{...}
}

會被渲染爲

el-alert__content{...}

5. @when 後面跟着的class會被渲染爲： .is-class 。例如：

@b alert{
  @e title{
    @when bold {...}
  }
}

會被渲染爲

el-alert__title.is-bold{...}

6. @mixin button-size 後面跟着四個值，分別表明是padding上下、padding左右，font-size，border-radius。

例如：

@b button{
  @mixin button-size 10px 20px 30px 40px;
}

會被渲染爲

.el-button{
  padding: 10px 20px;
  font-size: 30px;
  border-radius: 40px;
}

7. @mixin button-variant 後面跟着3個值，分別表明color、background-color、border-color。同時還會渲染一系列的hover\active\focus等顏色的深淺變化。

例如：

@b button {
  @mixin button-variant white blue black;
}

會被渲染爲：

.el-button{
  color: white;
  background-color: blue;
  border-color: black;
}

.el-button:hover,
.el-button:focus{...}

/* 一系列顏色變化 */
......

8. tint() 和 shade() 函數，分別用來使顏色提高亮度、顏色下降亮度用的。接受兩個參數，第一個是顏色值，第二個是明暗百分比。

例如：

.foo {
  color: tint(#BADA55, 42%);
}

.bar {
  background-color: shade(#663399, 42%);
}

會被渲染爲：

.foo {
  color: #e2efb7;
}

.bar {
  background-color: #2a1540;
}

element-theme-default 二次開發指南

官方給出的 例子 目前還有一些問題，因爲缺乏了 vue-popup 組件，在 et --watch 的時候會報錯。

我fork的倉庫里加入了 vue-popup 的組件，在官方解決這個問題以前暫時能夠採用以下方式（目前跟官方倉庫保持同步）：

首先是安裝工具：

npm i element-theme -g

而後安裝默認主題（本倉庫）：

npm i https://github.com/Molunerfinn/theme-default.git -D

初始化變量文件

et -i

若是使用默認配置，執行後當前目錄會有一個 element-variables.css 文件。內部包含了主題所用到的全部變量，它們使用 CSS4 的風格定義。大體結構以下：

:root {

  /* Colors
  -------------------------- */
  --color-primary: #20a0ff;
  --color-success: #13ce66;
  --color-warning: #f7ba2a;
  --color-danger: #ff4949;
  --color-info: #50BFFF;
  --color-blue: #2e90fe;
  --color-blue-light: #5da9ff;
  --color-blue-lighter: rgba(var(--color-blue), 0.12);
  --color-white: #fff;
  --color-black: #000;
  --color-grey: #C0CCDA;

修改變量

能夠經過修改 element-variables.css 文件裏的變量，便可改變總體風格。

修改源碼

進入 node_modules/element-theme-default/src 目錄下修改相應文件的代碼便可。

編譯主題

保存文件後，到命令行裏執行 et 編譯主題，若是你想啓用 watch 模式，實時編譯主題，增長 -w 參數。

et -w

注意：修改源碼的時候不會觸發編譯的watch模式，須要手動再保存一遍 element-variables.css 這個文件才能夠觸發編譯效果。

開發愉快~