初始化元素
* {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;
}
}
按钮效果: