// 全局宽度 .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; } }