Element-ui Theme浅析

一、浅析

1.采用BEM方式管理类名

• B：block，模块,一个块是一个独立的实体，块可以包含其它块，名字单词间用-连接；如一个搜索块；
• E：element，元素，一个元素是块的一部分，具有某种功能，以__与block连接。如搜索块里的input或button
• M：modifier，修饰符。修饰符作为一个块或者一个元素的属性，代表这个块或者是元素在外观或是行为上的改变。以--与block连接

2.没有选用Less或Sass之类的预处理器，而是选用更接近未来标准的CSS4风格的语法，用PostCSS和整合了postcss-bem和postcss-cssnext等插件的postcss-salad开发

显著特征：

• 声明变量
  • 在sass中通过$声明一个变量，在CSS4中是这样声明的：通过前缀--来声明一个变量，如果变量放在:root中，代表此变量为全局变量，如果放在某个CSS代码中则代表局部变量。使用时借助var()函数来调用已声明的变量，在var()函数中可接受两个参数。第一参数代表变量名，第二个参数指变量的默认值。如下所示：

  :root {
      --primary-color:skyblue;
  }
  nav.primary{
      background: var(--primary-color);
      color: var(--my-var, red);
  }
  

• 支持@import引入外部css
• 支持层级嵌套书写
• 支持一些独特的语法,具体源码可以看node_modules/element-theme/lib/config.js
  • @b 后面跟着的class会渲染为el-class。如@b alert{...}会被渲染为el-alert{...}
  • @modifier或者@m 后面跟着的class会被渲染为--class。如

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

  会被渲染为

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

  • @e后面跟着的class会被渲染为__class。如

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

  会被渲染为

  el-alert__content{...}
  

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

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

  会被渲染为

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

  • @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;
  }
  

  • @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{...}
  

  • tint()和shade()函数，分别用来使颜色提升亮度、颜色降低亮度用的。接受两个参数，第一个是颜色值，第二个是明暗百分比。如

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

  会被渲染为：

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

3.为降低用户自定义主题的上手成本，提供了命令行工具指导用户快速自定义一套主题

4.源码

• 在node_modules/element-theme/bin/element-theme中定义了一些命令行工具的命令，如et -i,et -w等等；
• node_modules/element-theme/lib/config.js主要记载了些样式的配置信息，将element-theme-default及element-theme结合，element-them-default文件中主要存放了各个模块的样式及变量文件如element-variables.css；
• config.js配置信息将要在node_modules/element-theme/lib/gen-vars.js中使用，gen-vars.js中主要记录了读取配置文件的逻辑；
• node_modules/element-theme/lib/task.js主要使用gulp对postCss样式文件、字体等进行一些操作及输出使浏览器支持。

二、使用方法

1.安装工具 npm i element-theme -g

安装默认主题（在自己项目中）npm i https://github.com/Molunerfinn/theme-default.git -D

初始化变量文件 et -i 运行此命令后会在根目录生成一个element-variables.css文件。内部包含了主题所用到的所有变量

修改变量，修改element-variables.css里的变量即可改变整体风格（修改后保存后重新编译运行）

修改源码，node_modules/element-theme-default/src

编译主题，保存文件后，到命令行里执行 et 编译主题，如果你想启用 watch 模式，实时编译主题，增加 -w 参数。命令：et -w

参考：

Element-ui、大漠、post-salad、Molunerfinn