// 循环生成 margin padding fontSize
@for $i from 1 through 100 {
  .m#{$i} { margin: $i + rpx; }
  .mt#{$i} { margin-top: $i + rpx; }
  .mb#{$i} { margin-bottom: $i + rpx; }
  .ml#{$i} { margin-left: $i + rpx; }
  .mr#{$i} { margin-right: $i + rpx; }

  .p#{$i} { padding: $i + rpx; }
  .pt#{$i} { padding-top: $i + rpx; }
  .pb#{$i} { padding-bottom: $i + rpx; }
  .pl#{$i} { padding-left: $i + rpx; }
  .pr#{$i} { padding-right: $i + rpx; }

  .f#{$i} { font-size: $i + rpx; }
}

.w100 { width: 100% !important; }

.fwb { font-weight: bold; }

.fl { float: left; }
.fr { float: right; }
.dib { display: inline-block; }
.df { display: flex; }
.df_align_center { display: flex; align-items: center; }
.df_center { display: flex; justify-content: center; align-items: center; }
.df_sb { display: flex; justify-content: space-between; align-items: center; }
.tc { text-align: center; }
.tr { text-align: right; }

.clear_fix {
  &::after {
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    content: '';
  }
}

.bb { border-bottom: 1px solid #cccccc; }

.del_clr { color: #F56C6C; }
.del_clr_btn { color: #F56C6C; &:hover { color: #F56C6C; } &:focus { color: #F56C6C; } }
.text_underline { text-decoration: underline; }
