bin-ui/src/styles/common/mixins.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

make-row(gutter = 0) {
  position: relative;
  margin-left: (gutter / -2);
  margin-right: (gutter / -2);
  height: auto;
  clear-fix()
}


make-grid(class = '') {
  float-grid-columns(class);
  loop-grid-columns(class);
}

$grid-columns = 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

float-grid-columns(class) {
  for row in $grid-columns {
    .bin-col-span{class}-{row} {
      float: left;
      flex: 0 0 auto;
    }
  }
}

loop-grid-columns(class) {
  for index in $grid-columns {
    .bin-col-span{class}-{index} {
      display: block;
      width: percentage((index / 24));
    }
    .bin-col{class}-push-{index} {
      left: percentage((index / 24));
    }
    .bin-col{class}-pull-{index} {
      right: percentage((index / 24));
    }
    .bin-col{class}-offset-{index} {
      margin-left: percentage((index / 24));
    }
    .bin-col{class}-order-{index} {
      order: index;
    }
  }
  .bin-col-span{class}-{0} {
    display: none;
  }
  .bin-col{class}-push-0 {
    left: auto;
  }
  .bin-col{class}-pull-0 {
    right: auto;
  }
  .bin-col{class}-offset-0 {
    margin-left: 0
  }
  .bin-col{class}-order-0 {
    order: 0;
  }
}

clear-fix() {
  zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}