前端常用样式组元SCSS

初始化元素

---

* {margin: 0; padding: 0; border: 0;box-sizing: border-box;}

基础色

---

$primary: #183ee4;
$success: #0cce63;
$danger: #f00c63;
$brder-color: #adacae;

设置主题色

---

/**
*@method 设置主题色类
*@param $name 颜色分类
*@param $oClor 原色
*@param $start 颜色等级开始
*@param $start 颜色等级结束
**/
@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
        }
    }
}
/**
*@method 设置主题色组元
*@param $name 颜色分类
*@param $oClor 原色
*@param $start 颜色等级开始
*@param $start 颜色等级结束
**/
@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 1 through 7 {
    .clor#{$num} {
       color: lighten(#000, percentage($num/10));
    }
}

设置不同颜色等级边框

---

@for $index from 1 through 3 {
    $num: $index+5;
    $bcolor:1px solid lighten(#000, percentage($num/10))
    .borderL#{$index} {
        border: #{$bcolor};
    }
    .borderL#{$index} {
        border-left: #{$bcolor};
    }
    .borderR#{$index} {
        border-right: #{$bcolor};
    }
    .borderT#{$index} {
        border-top: #{$bcolor};
    }
    .borderB#{$index} {
        border-bottom: #{$bcolor};
    }
}

设置内外边框

---

@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布局

---

.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,
.button{
    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;
    }
}

按钮效果：