支持一些独特的语法,具体源码可以看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。同时还会渲染一系列的hoveractivefocus等颜色的深浅变化。如
@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;
}