rtim/assets/css/common.scss

// 字体
@for $i from 20 through 100{
    .fs#{$i} {
		font-size: #{$i}rpx;
    }
}
// 颜色
@for $i from 0 through 9{
    .color#{$i} {
		color: #{$i}#{$i}#{$i};
    }
}
// padding
@for $i from 1 through 100{
    .p#{$i} {
			padding: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .ptb#{$i} {
			padding-top: #{$i}rpx ;
			padding-bottom: #{$i}rpx ;
    }
}
@for $i from 1 through 100{
    .plr#{$i} {
			padding-left: #{$i}rpx;
			padding-right: #{$i}rpx;
    }
}
@for $i from 1 through 200{
    .pt#{$i} {
			padding-top: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .pl#{$i} {
			padding-left: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .pr#{$i} {
			padding-right: #{$i}rpx;
    }
}
@for $i from 1 through 200{
    .pb#{$i} {
			padding-bottom: #{$i}rpx;
    }
}
// margin
@for $i from 1 through 100{
    .m#{$i} {
			margin: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .mtb#{$i} {
			margin-top: #{$i}rpx ;
			margin-bottom: #{$i}rpx ;
    }
}
@for $i from 1 through 100{
    .mlr#{$i} {
			margin-left: #{$i}rpx;
			margin-right: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .mt#{$i} {
			margin-top: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .ml#{$i} {
			margin-left: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .mr#{$i} {
			margin-right: #{$i}rpx;
    }
}
@for $i from 1 through 100{
    .mb#{$i} {
			margin-bottom: #{$i}rpx;
    }
}
// 圆角
@for $i from 0 through 100{
    .radius#{$i} {
			border-radius: #{$i}rpx;
    }
}
// padding 左右+width自动计算
@for $i from 10 through 60{
    .w-calc-#{$i} {
			width: calc(100% - #{$i*2}rpx);
			padding-left:  #{$i}rpx;
			padding-right:  #{$i}rpx;
    }
}

// gap
@for $i from 1 through 100{
	.gap#{$i} {
		gap: #{$i}rpx;
	}
}

// 高
@for $i from 1 through 900{
	.h#{$i} {
		height: #{$i}rpx;
	}
}
// 宽
@for $i from 1 through 900{
	.w#{$i} {
		width: #{$i}rpx;
	}
}
// 宽
@for $i from 1 through 900{
	.lh#{$i} {
		line-height: #{$i}rpx;
	}
}


// font-weight
$steps: 100 200 300 400 500 600 700 800 bold;
@each $i in $steps {
	.weight-#{$i} {
		font-weight: $i;
	}
}

.bold {
	font-weight: bold;
}
.scrollx {
	overflow-x: scroll;
}

.scrolly {
	overflow-y: scroll;
}

.row {
	display: flex;
	flex-direction: row;
}

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

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

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

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

.justify-around {
	display: flex;
	justify-content: space-around;
}
.justify-evenly {
	display: flex;
	justify-content: space-evenly;
}

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

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

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

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

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

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

.wrap {
	flex-wrap: wrap;
}

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