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