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
作者:haoxl
出版:http://www.cnblogs.com/haoxl/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。