.mt1 {
    margin-top: 1px;
}

.mt24 {
    margin-top: 24px;
}

.mr24 {
    margin-right: 24px;
}

.ml24 {
    margin-left: 24px;
}

.pt24 {
    padding-top: 24px;
}

.pr24 {
    padding-right: 24px;
}

.pb24 {
    padding-bottom: 24px;
}

.pl24 {
    padding-left: 24px;
}

.pt88 {
    padding-top: 88px;
}

.mlr24 {
    margin-left: 24px;
    margin-right: 24px;
}

.ptb24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

.plr24 {
    padding-left: 24px;
    padding-right: 24px;
}
.p20 {
    padding: 20upx;
}

.p24 {
    padding: 24upx;
}

.p30 {
    padding: 30upx;
}

.p40 {
    padding: 40upx;
}





@for $i from 1 through 30 {
	.mt#{$i*10}{
		margin-top: $i * 10px;
	}
	.pt#{$i*10}{
		padding-top: $i * 10px;
	}  
	.pb#{$i*10}{
		padding-bottom: $i * 10px;
	}  
}

@for $i from 1 through 20 {
	.pl#{$i*10}{
		padding-left: $i * 10px;
	} 
	.pr#{$i*10}{
		padding-right: $i * 10px;
	}  
	.mb#{$i*10}{
		margin-bottom: $i * 10px;
	}  
	.ml#{$i*10}{
		margin-left: $i * 10px;
	}  
	.mr#{$i*10}{
		margin-right: $i * 10px;
	}  
	.mlr#{$i*10}{
		margin-left: $i * 10px;
		margin-right: $i * 10px;
	}  
	.mtb#{$i*10}{
		margin-top: $i * 10px;
		margin-bottom: $i * 10px;
	}  
	.ptb#{$i*10}{
		padding-top: $i * 10px;
		padding-bottom: $i * 10px;
	}  
	.plr#{$i*10}{
		padding-left: $i * 10px;
		padding-right: $i * 10px;
	}  
}