Scss语法

/* 字体大小全局样式   */
@for $i from 10 through 32 {
	.f-s-#{$i} {
		font-size: #{$i}px !important;
	}
}
使用如下:
<span class="f-s-14"></span>


/* 字体大小、行高、字体的font-weight 全局样式   */
$minFontSize : 0 !default;
$maxFontSize : 50 !default;
$fontSizeList: 100,200,300,400,500,600 !default;
@for $num from $minFontSize through $maxFontSize {
    .f-s-#{$num}{
        font-size:#{$num}px;
    }
    .l-h-#{$num}{
        line-height:#{$num}px;
    }
}
@each $num in $fontSizeList{
    .f-w-#{$num}{
        font-weight:#{$num};
    }
}

/* 外边距、内边距全局样式  */
$minMarginPadding : 0 !default;
$maxMarginPadding : 32 !default;
$marginPaddingList : 40,50,60,70,80,90,100,110,120,125,130,140,150 !default;

@for $num from $minMarginPadding through $maxMarginPadding {
    .m-t-#{$num}{
        margin-top:#{$num}px;
    }
    .m-b-#{$num}{
        margin-bottom:#{$num}px;
    }
    .m-l-#{$num}{
        margin-left:#{$num}px;
    }
    .m-r-#{$num}{
        margin-right:#{$num}px;
    }
    .m-#{$num}{
        margin:#{$num}px;
    }

    .p-t-#{$num}{
        padding-top:#{$num}px;
    }
    .p-b-#{$num}{
        padding-bottom:#{$num}px;
    }
    .p-l-#{$num}{
        padding-left:#{$num}px;
    }
    .p-r-#{$num}{
        padding-right:#{$num}px;
    }
    .p-#{$num}{
        padding:#{$num}px;
    }
}

@each $num in $marginPaddingList{
    .m-t-#{$num}{
        margin-top:#{$num}px;
    }
    .m-b-#{$num}{
        margin-bottom:#{$num}px;
    }
    .m-l-#{$num}{
        margin-left:#{$num}px;
    }
    .m-r-#{$num}{
        margin-right:#{$num}px;
    }
    .m-#{$num}{
        margin:#{$num}px;
    }

    .p-t-#{$num}{
        padding-top:#{$num}px;
    }
    .p-b-#{$num}{
        padding-bottom:#{$num}px;
    }
    .p-l-#{$num}{
        padding-left:#{$num}px;
    }
    .p-r-#{$num}{
        padding-right:#{$num}px;
    }
    .p-#{$num}{
        padding:#{$num}px;
    }
  }

.m-l-a {
    margin-left: auto;
}
.m-a {
    margin: 0 auto;
}
.t-c{
    text-align: center;
}


/* 元素的定位  */
$minPosition: 0 !default;
$maxPosition: 50 !default;
$positionList: 60, 70, 80, 90, 100 !default;

.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.absolute-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
@for $num from $minPosition through $maxPosition {
	.t-#{$num} {
		top: #{$num}px;
	}
	.r-#{$num} {
		right: #{$num}px;
	}
	.l-#{$num} {
		left: #{$num}px;
	}
	.b-#{$num} {
		bottom: #{$num}px;
	}
}

@each $num in $positionList {
	.t-#{$num} {
		top: #{$num}px;
	}
	.r-#{$num} {
		right: #{$num}px;
	}
	.l-#{$num} {
		left: #{$num}px;
	}
	.b-#{$num} {
		bottom: #{$num}px;
	}
}


//flex定位问题

$minFlex: 0 !default;
$maxFlex: 10 !default;
.flex {
  display: flex;
}
.flex-1{
  flex:1
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-stretch {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.flex-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-space-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-space-a {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-right {
  justify-content: right;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

@for $num from $minFlex through $maxFlex {
  .flex#{$num} {
    flex: #{$num};
  }
}


/***边框圆角 */
$minBrs : 0 !default;
$maxBrs : 150 !default;
$brsList : 50,60 !default;

@for $num from $minBrs through $maxBrs {
    .brs#{$num}{
        border-radius: #{$num}px;
    }
    .brs-t-l#{$num}{
        border-top-left-radius: #{$num}px;
    }
    .brs-t-r#{$num}{
        border-top-right-radius: #{$num}px;
    }
    .brs-b-l#{$num}{
        border-bottom-left-radius: #{$num}px;
    }
    .brs-b-r#{$num}{
        border-bottom-right-radius: #{$num}px;
    }
}

@each $num in $heightWidthList{
    .brs#{$num}{
        border-radius: #{$num}px;
    }
    .brs-t-l#{$num}{
        border-top-left-radius: #{$num}px;
    }
    .brs-t-r#{$num}{
        border-top-right-radius: #{$num}px;
    }
    .brs-b-l#{$num}{
        border-bottom-left-radius: #{$num}px;
    }
    .brs-b-r#{$num}{
        border-bottom-right-radius: #{$num}px;
    }
}

.brs-percent-50{
    border-radius: 50%;
}