【自用】uniapp全局统一样式scss管理

uniapp移动端全局common.scss样式统一类名管理

page {background: #F7F7F7;
}view {box-sizing: border-box;
}.b-btn {width: 640rpx;height: 92rpx;background: linear-gradient(141deg, #3167F1 0%, #31A1F1 100%);border-radius: 100rpx 100rpx 100rpx 100rpx;font-size: 32rpx;font-family: PingFang SC-Medium, PingFang SC;font-weight: 500;color: #FFFFFF;display: flex;justify-content: center;align-items: center;
}
.custom_style {color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 24rpx;&_icon {background-color: #ffffff;font-size: 80rpx;width: 120rpx;height: 120rpx;border-radius: 100%;display: flex;justify-content: center;align-items: center;margin-top: -40rpx;@include flex-c-c;image{width: 65%;height: 65%;}}}.tCenter {text-align: center;
}.flex-1 {flex: 1;
}.flex {display: flex;
}.wrap {flex-wrap: wrap;
}.column {flex-direction: column;
}.row {flex-direction: row;
}.jEnd {justify-content: flex-end;
}.jStart {justify-content: flex-start;
}.jEvenly {justify-content: space-evenly;
}.aStart {align-items: flex-start;
}.center {display: flex;justify-content: center;align-items: center;
}.aCenter {display: flex;align-items: center;
}.jCenter {display: flex;justify-content: center;
}.jBetween {display: flex;justify-content: space-between;
}.line1 {display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;-webkit-line-clamp: 1;overflow: hidden;
}.line2 {overflow: hidden;-webkit-line-clamp: 2;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;
}.line3 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
}
.fc{display: flex;flex-direction: column;
}
.w-100{width: 100%;
}
.fff{background-color: #FFFFFF;
}// 定义字体(rpx)单位
@for $i from 9 through 40 {.u-font-#{$i},.fs#{$i} {font-size: $i + rpx;}
}// 宽高
@for $i from 0 through 500 {.w#{$i} {width: $i + rpx !important;}.h#{$i} {height: $i + rpx !important;}
}@for $i from 0 through 201 {.m#{$i} {margin: $i + rpx !important;}.p#{$i} {padding: $i + rpx !important;}@each $short, $long in l left, t top, r right, b bottom {.m#{$short}#{$i} {margin-#{$long}: $i + rpx !important;}.p#{$short}#{$i} {padding-#{$long}: $i + rpx !important;}}
}