template-MP/common/styles/base.scss

// 定义内外边距，只生成常用的数值
$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)单位，只生成常用的字体大小
$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;
  }
}
// 圆角
$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} {
    width: 100%;
    height: calc($i * 1em + 0.5em);
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: $i;
    overflow: hidden;
    -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;
}