// 定义基础变量
@base-spacing: 1px;
@font-sizes: "12" 12px, "14" 14px, "16" 16px, "18" 18px, "20" 20px,
  "22" 22px, "24" 24px, "26" 26px, "28" 28px, "30" 30px;
@colors: "primary" #3774f6, "black" #000000, "white" #ffffff, "gray" #808080,
  "blue" #007bff, "green" #28a745, "red" #dc3545;

// 生成边距类（递归mixin实现）
.margin-loop(@i) when (@i >=0) {
  .m-@{i} {
    margin: @base-spacing * @i;
  }

  .mt-@{i} {
    margin-top: @base-spacing * @i;
  }

  .mr-@{i} {
    margin-right: @base-spacing * @i;
  }

  .mb-@{i} {
    margin-bottom: @base-spacing * @i;
  }

  .ml-@{i} {
    margin-left: @base-spacing * @i;
  }

  .my-@{i} {
    margin-top: @base-spacing * @i;
    margin-bottom: @base-spacing * @i;
  }

  .mx-@{i} {
    margin-left: @base-spacing * @i;
    margin-right: @base-spacing * @i;
  }

  .margin-loop(@i - 1);
}

.margin-loop(36);

// 生成padding类
.padding-loop(@i) when (@i >=0) {
  .p-@{i} {
    padding: @base-spacing * @i;
  }

  .pt-@{i} {
    padding-top: @base-spacing * @i;
  }

  .pr-@{i} {
    padding-right: @base-spacing * @i;
  }

  .pb-@{i} {
    padding-bottom: @base-spacing * @i;
  }

  .pl-@{i} {
    padding-left: @base-spacing * @i;
  }

  .py-@{i} {
    padding-top: @base-spacing * @i;
    padding-bottom: @base-spacing * @i;
  }

  .px-@{i} {
    padding-left: @base-spacing * @i;
    padding-right: @base-spacing * @i;
  }

  .padding-loop(@i - 1);
}

.padding-loop(36);

// 生成字体尺寸类
each(@font-sizes, {
  .text-@{value} {
    font-size: extract(@value, 2);
  }
});

// 生成颜色类
each(@colors, {
  @name: extract(@value, 1);
  @color: extract(@value, 2);

  .text-@{name} {
    color: @color;
  }

  .bg-@{name} {
    background-color: @color;
  }
});

// Flex布局类
.flex {
  display: flex;
}

// 主轴对齐
.justify {
  &-start {
    justify-content: flex-start;
  }

  &-end {
    justify-content: flex-end;
  }

  &-center {
    justify-content: center;
  }

  &-between {
    justify-content: space-between;
  }

  &-around {
    justify-content: space-around;
  }
}

// 交叉轴对齐
.items {
  &-start {
    align-items: flex-start;
  }

  &-end {
    align-items: flex-end;
  }

  &-center {
    align-items: center;
  }

  &-stretch {
    align-items: stretch;
  }
}

// 排列方向
.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

// 定位类
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

// 宽度类
.w-full {
  width: 100%;
}