* {
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;
}
}
按钮效果：
