element.css编辑模式,element-ui组件样式修改

@component-namespace后面跟着的通常是 el，会通知整个组件的class前缀渲染为 el

以下的部分是跟在 @component-namespace层级之后,也就是都在 @component-namespace el {...}花括号内。

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