min-shenze-applet-master/static/style/css/common.scss

// 全局宽度
.o-w {
	width: 100%;
}
.o-h {
	height: 100%;
}
.c-text-c {
	text-align: center;
}
.c-text-r {
	text-align: right;
}
.c-text-b {
	font-weight: bold;
}
// 盒模型转换
.l-bs {
	box-sizing: border-box;
}
// 全局阴影
.l-boxShadow {
	box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
}
// 自定义全局flex
.l-flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

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

.l-flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.l-f {
	display: flex;
}
.l-flex-d {
	flex-direction: column;
}
.l-flex-w {
	flex-wrap: wrap;
}
.l-flex-j-c {
	justify-content: center;
}
.l-flex-j-b {
	justify-content: space-between;
}

.l-flex-j-a {
	justify-content: space-around;
}
.l-flex-c {
	align-items: center;
}
.l-flex-j-e {
	justify-content: flex-end;
}

.l-flex-j-s {
	justify-content: flex-start;
}
// 定位相关
.l-re {
	position: relative;
}

.l-ab {
	position: absolute;
}

.l-fixed {
	position: fixed;
}

.l-scroll {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.l-fill {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
// 颜色相关
.c-color-0 {
	color: #000000;
}
.c-color-1 {
	color: #111111;
}
.c-color-3 {
	color: #333333;
}

.c-color-6 {
	color: #666666;
}
.c-color-8 {
	color: #888888;
}
.c-color-9 {
	color: #999999;
}

.c-color-f {
	color: #ffffff;
}
.c-color-n {
	color: transparent;
}
// 金钱的颜色
.c-color-MR {
	color: #f43530;
}
.c-bg-c {
	background-color: #cccccc;
}

.c-bg-0 {
	background-color: #000000;
}

.c-bg-9 {
	background-color: #999999;
}

.c-bg-f {
	background-color: #ffffff;
}

.c-bg-n {
	background-color: transparent;
}
// 使用scss配置一些常用css
$pixel: 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 40, 44, 50, 66, 100;
$position: top, right, bottom, left;
$position-class: 't', 'r', 'b', 'l';
// 单个方向
@each $item in $pixel {
	@each $p in $position {
		$index: index($position, $p);
		$class: nth($position-class, $index);
		.o-m#{$class}-#{$item} {
			margin-#{$p}: $item + rpx;
		}
		.o-p#{$class}-#{$item} {
			padding-#{$p}: $item + rpx;
		}
	}
}
// 左右或上下两个方向
@each $item in $pixel {
	.o-mlr-#{$item} {
		margin-left: $item + rpx;
		margin-right: $item + rpx;
	}
	.o-plr-#{$item} {
		padding-left: $item + rpx;
		padding-right: $item + rpx;
	}
	.o-mtb-#{$item} {
		margin-top: $item + rpx;
		margin-bottom: $item + rpx;
	}
	.o-ptb-#{$item} {
		padding-top: $item + rpx;
		padding-bottom: $item + rpx;
	}
}
/*mr10表示margin-right:10px,其他样式依次类推*/
// text字体大小，radius边框圆角
@for $i from 1 through 50 {
	.c-text-#{$i} {
		font-size: $i + px;
	}
	.c-radius-#{$i} {
		border-radius: $i + rpx;
	}
	.l-flex-#{$i} {
		flex: $i;
	}
}