less--常用布局

flex

.flex-container {
  display: flex;

  &.flex-align-center {
    align-items: center;
  }
}

.flex-item {
  flex: 1;
}

// .flex-shrink {
//   position: relative;
//   flex-shrink: 1;
//   -ms-flex-negative: 1;
//   -webkit-flex-shrink: 1;
//   -ms-flex: 0 1 auto;
//   flex: 0 1 auto;
// }

@col: 6;
.mixin-loop (@i) when (@i > 0) {
  &.flex-@{i} {
    flex: 100% / @i !important;
  }
  .mixin-loop(@i - 1);
}
.mixin-loop(@col);

height高度

@row: 12;
.mixin-loop (@i) when (@i > 0) {
  .row-@{i} {
    height: 100% / (12 / @i) !important;
  }
  .mixin-loop(@i - 1);
}
.mixin-loop(@row);

margin and padding布局

// 定义一个数组
@sizeList:xs,sm,md,lg,xlg,xxlg;

@list: t, r, b, l;

/* 间距 n的倍数 */
@base-spacing: 10px;

.base-spacing-margin-t (@spacing: 1) {
  margin-top: @base-spacing * @spacing;
}

.base-spacing-margin-r (@spacing: 1) {
  margin-right: @base-spacing* @spacing;
}

.base-spacing-margin-b (@spacing: 1) {
  margin-bottom: @base-spacing* @spacing;
}

.base-spacing-margin-l (@spacing: 1) {
  margin-left: @base-spacing* @spacing;
}

.base-spacing-padding-t (@spacing: 1) {
  padding-top: @base-spacing* @spacing;
}

.base-spacing-padding-r (@spacing: 1) {
  padding-right: @base-spacing* @spacing;
}

.base-spacing-padding-b (@spacing: 1) {
  padding-bottom: @base-spacing* @spacing;
}

.base-spacing-padding-l (@spacing: 1) {
  padding-left: @base-spacing* @spacing;
}

// 条件
.padding-mixin(@a, @i) when (@a = t) {
  .base-spacing-padding-t(@i);
}

.padding-mixin(@a, @i) when (@a = r) {
  .base-spacing-padding-r(@i);
}

.padding-mixin(@a, @i) when (@a = b) {
  .base-spacing-padding-b(@i);
}

.padding-mixin(@a, @i) when (@a = l) {
  .base-spacing-padding-l(@i);
}

.margin-mixin(@a, @i) when (@a = t) {
  .base-spacing-margin-t(@i);
}

.margin-mixin(@a, @i) when (@a = r) {
  .base-spacing-margin-r(@i);
}

.margin-mixin(@a, @i) when (@a = b) {
  .base-spacing-margin-b(@i);
}

.margin-mixin(@a, @i) when (@a = l) {
  .base-spacing-margin-l(@i);
}

// class
.test (@className, @i ,@name) {
  .p-@{name}-@{className} {
    .padding-mixin(@name, @i / 2);
  }

  .m-@{name}-@{className} {
    .margin-mixin(@name, @i / 2);
  }
  //.p-@{name}-@{className} {
  //  .base-spacing-padding-t(@i);
  //}
}

// 循环
.loop(@i) when (@i < (length(@sizeList)+1)) {

  .s-loop(@j) when (@j < (length(@list)+1)) {
    //.sss(extract(@list, @i));
    .test(extract(@sizeList, @i), @i, extract(@list, @j));
    .s-loop(@j+1);
  }

  .s-loop(1);
  .loop(@i+1);
}
.loop(1);