改变elementui卡片crad样式_elementui组件样式修改

&＃64;component-namespace后面跟着的通常是 el&＃xff0c;会通知整个组件的class前缀渲染为 el

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

&＃64;b后面跟着的class会渲染为&＃xff1a; el-class。例如&＃xff1a;

&＃64;b alert{...}会被渲染为

el-alert{...}

&＃64;modifier或者 &＃64;m后面跟着的class会被渲染为&＃xff1a; --class。例如&＃xff1a;

&＃64;b alert{ &＃64;modifier info{...}

&＃64;m warning{...}}

会被渲染为

el-alert--info{...}

el-alert--warning{...}

&＃64;e后面跟着的class会被渲染为&＃xff1a; __class。例如&＃xff1a;

&＃64;b alert{ &＃64;e content{...}}

会被渲染为

el-alert__content{...}

&＃64;when后面跟着的class会被渲染为&＃xff1a; .is-class。例如&＃xff1a;

&＃64;b alert{ &＃64;e title{ &＃64;when bold {...} }}

会被渲染为

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

&＃64;mixin button-size后面跟着四个值&＃xff0c;分别代表是padding上下、padding左右&＃xff0c;font-size&＃xff0c;border-radius。

例如&＃xff1a;

&＃64;b button{ &＃64;mixin button-size 10px 20px 30px 40px;}

会被渲染为

.el-button{ padding: 10px 20px; font-size: 30px; border-radius: 40px;}

&＃64;mixin button-variant后面跟着3个值&＃xff0c;分别代表color、background-color、border-color。同时还会渲染一系列的hover/active/focus等颜色的深浅变化。

例如&＃xff1a;

&＃64;b button { &＃64;mixin button-variant white blue black;}

会被渲染为&＃xff1a;

.el-button{ color: white; background-color: blue; border-color: black;}

.el-button:hover,.el-button:focus{...}/* 一系列颜色变化 */......

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

例如&＃xff1a;

.foo { color: tint(#BADA55, 42%);}

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

会被渲染为&＃xff1a;

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