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。例如：

1	@b alert{...}

会被渲染为

1	el-alert{...}

3.@modifier或者@m后面跟着的class会被渲染为：--class。例如：

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

会被渲染为

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

4.@e后面跟着的class会被渲染为：__class。例如：

1
2
3

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

会被渲染为

1	el-alert__content{...}

5.@when后面跟着的class会被渲染为：.is-class。例如：

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

会被渲染为

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

6.@mixin button-size 后面跟着四个值，分别代表是padding上下、padding左右，font-size，border-radius。

例如：

1
2
3

@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等颜色的深浅变化。
例如：

1
2
3

@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的组件，在官方解决这个问题之前暂时可以采用如下方式（目前跟官方仓库保持同步）：

首先是安装工具：

1	npm i element-theme -g

然后安装默认主题（本仓库）：

1	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这个文件才可以触发编译效果。

开发愉快~