Web前端之Sass中的颜色函数、active按钮激活、disabled禁用、hover鼠标悬浮、Style循环、Css

效果图

注意查看蓝色按钮。

---

---

---

Html

<divclass="box"><buttonclass="btn type_1">按钮</button><buttonclass="btn type_2">按钮</button><buttonclass="btn type_3">按钮</button><buttonclass="btn type_4">按钮</button><buttonclass="btn type_5">按钮妞</button><buttonclass="btn type_6">按钮</button><buttonclass="btn type_7">按钮</button><buttonclass="btn type_8">按钮</button><buttonclass="btn type_9">按钮</button></div>

Sass

$btnColors:#409eff,#67c23a,#f56c6c,#909399,#e6a23c,#fb7806,#8b590f,#f54343,#6c6d71;@for$i from 1 throughlength($btnColors){.btn.type_#{$i}{$color:nth($btnColors,$i);background:$color;color:#ffffff;&:hover{background:lighten($color,10%);}&:active{background:darken($color,10%);}&:disabled{background:lighten($color,10%);color:white;}}}

Scss编译后的Css

.btn.type_1{background:#409eff;color:#ffffff;}.btn.type_1:hover{background:#73b8ff;}.btn.type_1:active{background:#0d84ff;}.btn.type_1:disabled{background:#73b8ff;color:white;}.btn.type_2{background:#67c23a;color:#ffffff;}.btn.type_2:hover{background:#85cf60;}.btn.type_2:active{background:#529b2e;}.btn.type_2:disabled{background:#85cf60;color:white;}.btn.type_3{background:#f56c6c;color:#ffffff;}.btn.type_3:hover{background:#f89c9c;}.btn.type_3:active{background:#f23c3c;}.btn.type_3:disabled{background:#f89c9c;color:white;}.btn.type_4{background:#909399;color:#ffffff;}.btn.type_4:hover{background:#abadb1;}.btn.type_4:active{background:#767980;}.btn.type_4:disabled{background:#abadb1;color:white;}.btn.type_5{background:#e6a23c;color:#ffffff;}.btn.type_5:hover{background:#ecb869;}.btn.type_5:active{background:#d48a1b;}.btn.type_5:disabled{background:#ecb869;color:white;}.btn.type_6{background:#fb7806;color:#ffffff;}.btn.type_6:hover{background:#fc9338;}.btn.type_6:active{background:#cb6003;}.btn.type_6:disabled{background:#fc9338;color:white;}.btn.type_7{background:#8b590f;color:#ffffff;}.btn.type_7:hover{background:#b97614;}.btn.type_7:active{background:#5d3c0a;}.btn.type_7:disabled{background:#b97614;color:white;}.btn.type_8{background:#f54343;color:#ffffff;}.btn.type_8:hover{background:#f87373;}.btn.type_8:active{background:#f21313;}.btn.type_8:disabled{background:#f87373;color:white;}.btn.type_9{background:#6c6d71;color:#ffffff;}.btn.type_9:hover{background:#85868b;}.btn.type_9:active{background:#535457;}.btn.type_9:disabled{background:#85868b;color:white;}

页面Css

body{padding:0;box-sizing:border-box;margin:0;min-height:100vh;display:flex;justify-content:center;align-items:center;}.box{width:100%;display:flex;justify-content:center;}button{margin:0;padding:8px 16px;box-sizing:border-box;border:none;outline:none;background-color:transparent;border-radius:2px;cursor:pointer;}button:not(:first-child){margin-left:20px;}