循环生成字体水平方向上的对齐样式
@each $var in (left,center,right) { .text-#{var} { text-align: $var; } }
定义网站色彩的基本样式库
1,定义网站的主色调
$colors: ( 'primary': #db9e3f, 'info': #4b67af, 'danger': #791a15, 'blue-1': #1f3695, 'blue': #4394e4, 'white': #fff, 'white-1': #fcfcfc, 'white-2': #eceef0, 'light': #f9f9f9, 'light-1': #d4d9de, 'grey': #999, 'grey-1': #666, 'dark-1': #343440, 'dark': #222, 'black': #000, );
2.根据主色调生成字体样式和背景
@each $colorKey,$color in $colors { .text-#{$colorKey}{ color:$color; } .bg-#{$colorKey}{ background-color:$color } }
生成网站的标准字体大小
1.首先，定义基本字体大小
$base-font-size: 1rem;
2.然后按照一定比列，得到其他的字体大小
$font-sizes: ( xs:0.7692, //10px sm:0.9231,// 12px md:1, //13px lg: 1.0769, //14px xl:1.2308, );
3.循环生成字体大小
@each $sizeKey, $size in $font-sizes { .fs-#{$sizeKey}{ font-size: $size * $base-font-size; } }
通用flex布局方式
1.flex基本布局
.d-flex { display: flex; }
2.主轴的对齐方式
$flex-jc:( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, );
3.循环生成主轴上的对齐样式
@each $key,$value in $flex-jc { .jc-#{$key} { justify-content: $value; } }
同理，生成align-items的样式
$flex-ai:( start:flex-start, end:flex-end, center:center, stretch:stretch, ); @each $key,$value in $flex-ai { .ai-#{$key} { align-items: $value; } }
左边固定，右边自动占满
.flex-1 { flex:1; } // 精确写法 .flex-grow-1 { flex-grow:1; }
规范网站边距
定义基本边距尺寸，方便以后修改
$spacing-base-size: 1rem;
定义边距的类型
$spacing-types:( m:margin, p:padding, );
定义边距的方向
$spacing-directions:( t:top, r:right, b:bottom, l:left, );
定义边距大小，设置0-5六个等级
$spacing-sizes:( 0:0, 1:0.25, 2:0.5, 3:1, 4:1.5, 5:3, );
准备工作完成，循环生成三类样式，分别是
1.margin-top margin-bottom margin-left margin-right
2.margin，padding样式，及上下左右四个方向都有样式
3.左右，上边的margin和padding值
@each $typeKey, $type in $spacing-types { // .m-1 上下左右四个方向都有边距 @each $sizeKey, $size in $spacing-sizes { .#{$typeKey}-#{$sizeKey} { #{$type}: $size * $spacing-base-size; } } // .mx-1 , .my-1 x表示水平方向上的边距，y表示竖直方向上的边距 @each $sizeKey, $size in $spacing-sizes { .#{$typeKey}x-#{$sizeKey} { #{$type}-left: $size * $spacing-base-size; #{$type}-right: $size * $spacing-base-size; } .#{$typeKey}y-#{$sizeKey} { #{$type}-top: $size * $spacing-base-size; #{$type}-bottom: $size * $spacing-base-size; } } // .mt-1 具体的某个方向上的边距 @each $directionKey, $direction in $spacing-directions { @each $sizeKey, $size in $spacing-sizes { .#{$typeKey}#{$directionKey}-#{$sizeKey} { #{$type}-#{$direction}: $size * $spacing-base-size; } } } }
网站基本样式规范完毕！！！
