You've already forked template-MP
新增：全量优化
This commit is contained in:
yuantao
@@ -1,118 +1,97 @@
|
||||
// 定义内外边距，历遍1-100
|
||||
@for $i from 0 through 100 {
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2==0 or $i % 5==0 {
|
||||
// 得出：u-margin-30或者u-m-30
|
||||
.w-#{$i} {
|
||||
width: calc($i * 1%) !important;
|
||||
}
|
||||
.p-x-#{$i} {
|
||||
padding-left: $i + rpx !important;
|
||||
padding-right: $i + rpx !important;
|
||||
}
|
||||
|
||||
.p-y-#{$i} {
|
||||
padding-top: $i + rpx !important;
|
||||
padding-bottom: $i + rpx !important;
|
||||
}
|
||||
|
||||
.m-x-#{$i} {
|
||||
margin-left: $i + rpx !important;
|
||||
margin-right: $i + rpx !important;
|
||||
}
|
||||
|
||||
.m-y-#{$i} {
|
||||
margin-top: $i + rpx !important;
|
||||
margin-bottom: $i + rpx !important;
|
||||
}
|
||||
|
||||
.m-#{$i} {
|
||||
margin-left: $i + rpx !important;
|
||||
margin-right: $i + rpx !important;
|
||||
margin-top: $i + rpx !important;
|
||||
margin-bottom: $i + rpx !important;
|
||||
}
|
||||
|
||||
.p-#{$i} {
|
||||
padding-left: $i + rpx !important;
|
||||
padding-right: $i + rpx !important;
|
||||
padding-top: $i + rpx !important;
|
||||
padding-bottom: $i + rpx !important;
|
||||
}
|
||||
|
||||
.m-l-#{$i} {
|
||||
margin-left: $i + rpx !important;
|
||||
}
|
||||
|
||||
.m-t-#{$i} {
|
||||
margin-top: $i + rpx !important;
|
||||
}
|
||||
|
||||
.m-r-#{$i} {
|
||||
margin-right: $i + rpx !important;
|
||||
}
|
||||
|
||||
.m-b-#{$i} {
|
||||
margin-bottom: $i + rpx !important;
|
||||
}
|
||||
|
||||
.p-l-#{$i} {
|
||||
padding-left: $i + rpx !important;
|
||||
}
|
||||
|
||||
.p-t-#{$i} {
|
||||
padding-top: $i + rpx !important;
|
||||
}
|
||||
|
||||
.p-r-#{$i} {
|
||||
padding-right: $i + rpx !important;
|
||||
}
|
||||
|
||||
.p-b-#{$i} {
|
||||
padding-bottom: $i + rpx !important;
|
||||
}
|
||||
|
||||
.l-p-#{$i} {
|
||||
letter-spacing: $i + rpx !important;
|
||||
}
|
||||
|
||||
.z-i-#{$i} {
|
||||
z-index: $i;
|
||||
}
|
||||
|
||||
.l-h-#{$i} {
|
||||
line-height: $i + rpx !important;
|
||||
}
|
||||
.r-#{$i} {
|
||||
right: $i + rpx !important;
|
||||
}
|
||||
.l-#{$i} {
|
||||
left: $i + rpx !important;
|
||||
}
|
||||
|
||||
.t-#{$i} {
|
||||
top: $i + rpx !important;
|
||||
}
|
||||
.b-#{$i} {
|
||||
bottom: $i + rpx !important;
|
||||
}
|
||||
// 定义内外边距，只生成常用的数值
|
||||
$spacing-sizes: (0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100);
|
||||
@each $i in $spacing-sizes {
|
||||
.w-#{$i} {
|
||||
width: calc($i * 1%) !important;
|
||||
}
|
||||
.p-x-#{$i} {
|
||||
padding-left: $i + rpx !important;
|
||||
padding-right: $i + rpx !important;
|
||||
}
|
||||
.p-y-#{$i} {
|
||||
padding-top: $i + rpx !important;
|
||||
padding-bottom: $i + rpx !important;
|
||||
}
|
||||
.m-x-#{$i} {
|
||||
margin-left: $i + rpx !important;
|
||||
margin-right: $i + rpx !important;
|
||||
}
|
||||
.m-y-#{$i} {
|
||||
margin-top: $i + rpx !important;
|
||||
margin-bottom: $i + rpx !important;
|
||||
}
|
||||
.m-#{$i} {
|
||||
margin-left: $i + rpx !important;
|
||||
margin-right: $i + rpx !important;
|
||||
margin-top: $i + rpx !important;
|
||||
margin-bottom: $i + rpx !important;
|
||||
}
|
||||
.p-#{$i} {
|
||||
padding-left: $i + rpx !important;
|
||||
padding-right: $i + rpx !important;
|
||||
padding-top: $i + rpx !important;
|
||||
padding-bottom: $i + rpx !important;
|
||||
}
|
||||
.m-l-#{$i} {
|
||||
margin-left: $i + rpx !important;
|
||||
}
|
||||
.m-t-#{$i} {
|
||||
margin-top: $i + rpx !important;
|
||||
}
|
||||
.m-r-#{$i} {
|
||||
margin-right: $i + rpx !important;
|
||||
}
|
||||
.m-b-#{$i} {
|
||||
margin-bottom: $i + rpx !important;
|
||||
}
|
||||
.p-l-#{$i} {
|
||||
padding-left: $i + rpx !important;
|
||||
}
|
||||
.p-t-#{$i} {
|
||||
padding-top: $i + rpx !important;
|
||||
}
|
||||
.p-r-#{$i} {
|
||||
padding-right: $i + rpx !important;
|
||||
}
|
||||
.p-b-#{$i} {
|
||||
padding-bottom: $i + rpx !important;
|
||||
}
|
||||
.l-p-#{$i} {
|
||||
letter-spacing: $i + rpx !important;
|
||||
}
|
||||
.z-i-#{$i} {
|
||||
z-index: $i;
|
||||
}
|
||||
.l-h-#{$i} {
|
||||
line-height: $i + rpx !important;
|
||||
}
|
||||
.r-#{$i} {
|
||||
right: $i + rpx !important;
|
||||
}
|
||||
.l-#{$i} {
|
||||
left: $i + rpx !important;
|
||||
}
|
||||
.t-#{$i} {
|
||||
top: $i + rpx !important;
|
||||
}
|
||||
.b-#{$i} {
|
||||
bottom: $i + rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
|
||||
@for $i from 9 through 60 {
|
||||
// 定义字体(rpx)单位，只生成常用的字体大小
|
||||
$font-sizes: (9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 40, 44, 48, 52, 56, 60);
|
||||
@each $i in $font-sizes {
|
||||
.font-#{$i} {
|
||||
font-size: $i + rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 圆角
|
||||
@for $i from 4 through 60 {
|
||||
$rounded-sizes: (4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60);
|
||||
@each $i in $rounded-sizes {
|
||||
.rounded-#{$i} {
|
||||
border-radius: $i + rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 多行文本溢出
|
||||
@for $i from 1 through 5 {
|
||||
.over-line-#{$i} {
|
||||
@@ -125,3 +104,120 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
// 显示相关工具类
|
||||
.display-none {
|
||||
display: none !important;
|
||||
}
|
||||
.display-block {
|
||||
display: block !important;
|
||||
}
|
||||
.display-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
.display-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.display-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
// 浮动相关
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
.float-none {
|
||||
float: none !important;
|
||||
}
|
||||
.clearfix::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
// 文本对齐
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify !important;
|
||||
}
|
||||
// 文本装饰
|
||||
.text-underline {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.text-line-through {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
.text-no-underline {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
// 字体粗细
|
||||
.font-normal {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
// 文本大小写
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
// 垂直对齐
|
||||
.align-baseline {
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
.align-top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
.align-middle {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
.align-bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
// 位置相关
|
||||
.position-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
.position-absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
.position-fixed {
|
||||
position: fixed !important;
|
||||
}
|
||||
.position-static {
|
||||
position: static !important;
|
||||
}
|
||||
// 溢出处理
|
||||
.overflow-auto {
|
||||
overflow: auto !important;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.overflow-scroll {
|
||||
overflow: scroll !important;
|
||||
}
|
||||
// 可见性
|
||||
.visible {
|
||||
visibility: visible !important;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user