less 实现原子化 css

主要就是循环 这种方式： .generate-atoms(@start, @end, @space-base) when (@start <= @end) {}

或这种方式： each(range(1,500),{}

其余的就是常规写法

ok 结束了。。。

.d-flex {
  display: flex;

  &.wrap {
    flex-wrap: wrap;
  }

  &.no-wrap {
    flex-wrap: nowrap;
  }

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

  &.justify-start {
    justify-content: flex-start;
  }

  &.justify-center {
    justify-content: center;
  }

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

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

  &.item-center {
    &:extend(.justify-center);
    &:extend(.align-center);
  }

  & > .col {
    flex: 10000 1 0;
  }

  & > .col-auto {
    flex: 0 0 auto;
  }

  //&:not(.flex-column) {
  //  flex-wrap: wrap;
  //}

  &:not(.flex-column) > .col,
  &:not(.flex-column) > .col-auto {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .space {
    flex-grow: 1;
  }

  .fit-content {
    flex: 1 1 fit-content;
  }
  .no-shrink{
    flex-shrink: 0;
  }
}
.full-width{
  width: 100%;
}
.full-height{
  height: 100%;
}
.p-relative{
  position: relative;
}
.p-absolute{
  position: absolute;
}
.required{
  padding-left: 10px;
  position: relative;
  &:before{
    position: absolute;
    content: '*';
    left: 0;
    top: 1px;
    color: red;
  }
}
.fw-b{
  font-weight: bold;
}
.generate-atoms(@start, @end, @space-base) when (@start <= @end) {
  .br-@{start}{
    border-radius: unit(@start * @space-base, px);
  }
  .left-@{start}{
    left: unit(@start * @space-base, px);
  }
  .right-@{start}{
    right: unit(@start * @space-base, px);
  }
  .top-@{start}{
    top: unit(@start * @space-base, px);
  }
  .bottom-@{start}{
    bottom: unit(@start * @space-base, px);
  }
  .ft-@{start}{
    font-size: unit(@start * @space-base, px);
  }
  .pl-@{start} {
    padding-left: unit(@start * @space-base, px);
  }
  .pr-@{start} {
    padding-right: unit(@start * @space-base, px);
  }
  .pt-@{start} {
    padding-top: unit(@start * @space-base, px);
  }
  .pb-@{start} {
    padding-bottom: unit(@start * @space-base, px);
  }
  .pa-@{start} {
    padding: unit(@start * @space-base, px);
  }
  .px-@{start}{
    padding-left: unit(@start * @space-base, px);
    padding-right: unit(@start * @space-base, px);
  }
  .py-@{start}{
    padding-top: unit(@start * @space-base, px);
    padding-bottom: unit(@start * @space-base, px);
  }
  .ml-@{start} {
    margin-left: unit(@start * @space-base, px);
  }
  .mr-@{start} {
    margin-right: unit(@start * @space-base, px);
  }
  .mt-@{start} {
    margin-top: unit(@start * @space-base, px);
  }
  .mb-@{start} {
    margin-bottom: unit(@start * @space-base, px);
  }
  .ma-@{start} {
    margin: unit(@start * @space-base, px);
  }
  .mx-@{start}{
    margin-left: unit(@start * @space-base, px);
    margin-right: unit(@start * @space-base, px);
  }
  .my-@{start}{
    margin-top: unit(@start * @space-base, px);
    margin-bottom: unit(@start * @space-base, px);
  }
  .generate-atoms((@start + 1), @end, @space-base);
}
.generate-atoms(1, 100, 1);
each(range(1,500),{
  .w-@{value}{
    width: unit(@value, px);
  }
  .h-@{value}{
    height: unit(@value, px);
  }
})