web前端之sass中的颜色函数、active按钮激活、hover鼠标悬浮、disabled禁用、scss循环、css

---

效果图

注意查看蓝色按钮。

---

---

---

---

html

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

---

sass

$btnColors: #409eff, #67c23a, #f56c6c, #909399, #e6a23c, #fb7806, #8b590f, #f54343, #6c6d71;@for $i from 1 through length($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 {padding: 0;padding: 8px 16px;margin: 0;border: 0;outline: none;background-color: transparent;border-radius: 2px;cursor: pointer;
}button:not(:first-child) {margin-left: 20px;
}