一、浅析
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样式文件、字体等进行一些操作及输出使浏览器支持。