前端常用样式组元SCSS

* {

    margin: 0;

    padding: 0;

    border: 0;

    box-sizing: border-box;

}

#主题色

$primary: #183ee4;

$success: #0cce63;

$danger: #f00c63;

@mixin setThemeBgColor($name, $oClor, $start, $end) {

    .#{$name}-color {

        color: $oClor

    }

    .#{$name}-color-active {

        color: darken($oClor, 20%)

    }

    .#{$name}-bg {

        background-color: $oClor

    }

    @for $num from $start through $end {

        $color: lighten($oClor, percentage($num/10));

        .#{$name}-color-#{$num} {

            color: $color

        }

        .#{$name}-bg-#{$num} {

            background-color: $color

        }

    }

}

@mixin setTheme($name, $oClor, $start, $end) {

    --#{$name}:#{$oClor};

    --#{$name}-active: #{darken($oClor, 20%)};

    @for $num from $start through $end {

        $color: lighten($oClor, percentage($num/10));

        --#{$name}-#{$num}: #{$color};

    }

}

:root {

    @include setTheme(primary, $primary, 1, 4);

    @include setTheme(success, #0cce63, 1, 4);

    @include setTheme(danger, #f00c63, 1, 4);

}

@include setThemeBgColor(primary, $primary, 1, 4);

@include setThemeBgColor(success, #0cce63, 1, 4);

@include setThemeBgColor(danger, #f00c63, 1, 4);

@for $num from 0 through 7 {

    .clor#{$num} {

        color: lighten(#000, percentage($num/10));

    }

}

@for $index from 1 through 3 {

    $num: $index+5;

    .borderL#{$num} {

        border-left: 1px solid lighten(#000, percentage($num/10));

    }

    .borderR#{$num} {

        border-right: 1px solid lighten(#000, percentage($num/10));

    }

    .borderT#{$num} {

        border-top: 1px solid lighten(#000, percentage($num/10));

    }

    .borderB#{$num} {

        border-bottom: 1px solid lighten(#000, percentage($num/10));

    }

}

@mixin setPdMg($cName, $dName) {

    @for $index from 1 through 10 {

        $num: 5*$index;

        .#{$cName}L#{$num} {

            #{$dName}-left:#{$num}px;

        }

        .#{$cName}R#{$num} {

            #{$dName}-right:#{$num}px;

        }

        .#{$cName}T#{$num} {

            #{$dName}-top:#{$num}px;

        }

        .#{$cName}B#{$num} {

            #{$dName}-bottom:#{$num}px;

        }

        .#{$cName}H#{$num} {

            @extend .#{$cName}L#{$num};

            @extend .#{$cName}R#{$num};

        }

        .#{$cName}V#{$num} {

            @extend .#{$cName}T#{$num};

            @extend .#{$cName}B#{$num};

        }

        .#{$cName}#{$num} {

            @extend .#{$cName}V#{$num};

            @extend .#{$cName}H#{$num};

        }

    }

}

@include setPdMg(mg, margin);

@include setPdMg(pd, margin);

@mixin setComm($cName, $aName, $start, $end, $stup) {

    @for $num from $start through $end {

        $val: $num+$stup;

        .#{$cName}#{$val} {

            #{$aName}:#{$val}px

        }

    }

}

@include setComm(fs, font-size, 10, 40, 2);

@include setComm(lh, line-height, 10, 40, 6);

@include setComm(rd, border-radius, 4, 20, 2);

@for $num from 1 through 8 {

    $val: $num*100;

    .fw#{$num} {

        font-weight:#{$val}

    }

}

.flex {

    display: flex;

}

.flex-c {

    flex-direction: column;

}

.flex-wrap {

    flex-wrap: wrap;

}

.jcs {

    justify-content: flex-start;

}

.jcc {

    justify-content: center;

}

.jce {

    justify-content: flex-end;

}

.jca {

    justify-content: space-around;

}

.jcb {

    justify-content: space-between;

}

.ais {

    align-items: flex-start;

}

.aic {

    align-items: center;

}

.aie {

    align-items: flex-end;

}

按钮样式：

$lh: 38px;

$dh: 32px;

$sh: 26px;

$mh: 20px;

$lp: 0 10px;

$dp: 0 15px;

$sp: 0 10px;

$mp: 0 6px;

$dr: 4px;

$fs: 14px;

$fss: 12px;

$fms: 10px;

button,

.btn {

    height: $dh;

    line-height: $dh;

    padding: $dp;

    border-radius: $dr;

    font-size: $fs;

    background-color: #cdcdcd;

    cursor: pointer;

    &.small {

        height: $sh;

        line-height: $sh;

        padding: $sp;

        font-size: $fss;

    }

    &.mini {

        height: $mh;

        line-height: $mh;

        padding: $sp;

        font-size: $fms;

    }

    &.small.around {

        border-radius: 10px;

    }

    &.mini.around {

        border-radius: 8px;

    }

    &.around {

        border-radius: 15px;

    }

    &.block {

        width: 100%;

        display: block;

    }

    @each $type in primary, success, danger {

        &.#{$type} {

            background-color: var(--#{$type});

            color: #fff;

        }

        &.#{$type}.plan {

            border: 1px solid var(--#{$type});

            background-color: #fff;

            color: var(--#{$type});

        }

    }

    &[disabled] {

        opacity: .6;

        user-select: none;

        cursor: not-allowed;

    }

}

按钮效果：