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

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

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

.w100 { width: 100% !important; }

.fwb { font-weight: bold; }
.text_one_line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fl { float: left; }
.fr { float: right; }
.df { display: flex; }
.df_center { display: flex; justify-content: center; align-items: center; }
.df_sb { display: flex; justify-content: space-between; align-items: center; }
.df_ac { display: flex; align-items: center; }
.tc { text-align: center; }
.pointer { cursor: pointer; }

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

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

.clr_333 { color: #333333; }
.clr_666 { color: #666666 }
.del_clr { color: #F56C6C; }
.del_clr_btn { color: #F56C6C; &:hover { color: #F56C6C; } &:focus { color: #F56C6C; } }
.clr_success {
  color: #67C23A;
}
.clr_danger {
  color: #F56C6C;
}
