使用scss封装公共类名

@for $i from 1 through 500 {   //根据自己的范围定义
    // 字体
    .f#{$i} {
        font-size: #{$i}rpx;
    }
	.fw#{$i}{
		font-weight: #{$i};
	}
	.box#{$i}{
		width: #{$i}rpx;
		height: #{$i}rpx ;
	}
    .ma#{$i}{
        margin: #{$i}rpx;
    }
	.mx#{$i}{
		margin: 0 #{$i}rpx;
	}
	.my#{$i}{
		margin: #{$i}rpx 0;
	}
	.mt#{$i} {
        margin-top: #{$i}rpx;
    }
    .mb#{$i} {
        margin-bottom: #{$i}rpx;
    }
    .mr#{$i} {
        margin-right: #{$i}rpx;
    } 
    .ml#{$i} {
        margin-left: #{$i}rpx;
    } 
	.pa#{$i}{
        padding: #{$i}rpx;
    }
	.px#{$i}{
		padding: 0 #{$i}rpx;
	}
	.py#{$i}{
		padding: #{$i}rpx 0;
	}
	.pt#{$i} {
        padding-top: #{$i}rpx;
    }
    .pb#{$i} {
        padding-bottom: #{$i}rpx;
    }
    .pr#{$i} {
        padding-right: #{$i}rpx;
    } 
    .pl#{$i} {
        padding-left: #{$i}rpx;
    }
	.w#{$i}{
		width: #{$i}rpx;
	}
	.h#{$i}{
		height: #{$i}rpx;
	}
	.round#{$i}{
		border-radius:#{$i}rpx ;
	}
	
}

.mauto{
   margin:0 auto;
}


$bgColor:red;
.mian{
	width: 100%;
	height: 100vh;
	overflow: auto;
	background-color: $bgColor;
}


/* 公共flex布局 */
.df{
    display: flex;
}

/* 垂直居中 */
.dAlign{
    display: flex;
    align-items: center;
}
/* 水平居中 */
.dJustify{
    display: flex;
    justify-content: center;
}
/* 垂直水平居中 */
.dCenter{
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 两端对齐 */
.dSpaceBetween{
    display: flex;
	align-items: center;
    justify-content: space-between;
}
/* 两端对齐 */
.dSpaceAround{
    display: flex;
	align-items: center;
    justify-content: space-around;
}
/* 右对齐 */
.dFlexEnd{
    display: flex;
    justify-items: flex-end;
}
/* 左对齐 */
.dFlexStart{
    display: flex;
    justify-content: flex-start;
}
/* 垂直居中右对齐 */
.dRighteEnd{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* 超出部分省略号 */
.overText {
    /*第一步： 溢出隐藏 */
    overflow: hidden;
    /* 第二步：让文本不会换行， 在同一行继续 */
    white-space: nowrap;
    /* 第三步：用省略号来代表未显示完的文本 */
    text-overflow: ellipsis;
 }

.content {
    background: url("../assets/images/amendnight.png") no-repeat  center center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-size: 100%; //或者background-size:100%;
    position: relative;
}