/**
描述：辅助类 margin 或 padding 范围是从 0 到 25。这些类可以通过 {property}{direction}-{size} 格式使用。
规则：
    property 应用间距类型:
        ● m - 应用 margin
        ● p - 应用 padding

    direction 指定了该属性所应用的侧边:
        ● t - 应用 margin-top 和 padding-top 的间距
        ● b - 应用 margin-bottom 和 padding-bottom 的间距
        ● l - 应用 margin-left 和 padding-left 的间距
        ● r - 应用 margin-right 和 padding-right 的间距
        ● x - 应用 *-left 和 *-right 的间距
        ● y - 应用 *-top 和 *-bottom 的间距
        ● a - 在所有方向应用该间距

    size 以 4px 增量控制间距属性:
        ● 0 - 通过设置为 0 来消除所有 margin 或 padding
        ● 1 - 设置 margin 或 padding 为 4px
        ● 2 - 设置 margin 或 padding 为 8px
        ● 3 - 设置 margin 或 padding 为 12px
        ● ......
        ● 25 - 设置 margin 或 padding 为 100px
 */

// 类型
@property: {
  p: padding;
  m: margin;
};

// 属性
@direction: {
  t: top;
  r: right;
  b: bottom;
  l: left;
};

// 间距 (遵循 Material 设计规范：https://m3.material.io)
@size: 4px;

.space(@n, @i: 1) when (@i =< @n) {
  .ma-@{i} {
    margin: @size * @i;
  }
  .mx-@{i} {
    margin-left: @size * @i;
    margin-right: @size * @i;
  }
  .my-@{i} {
    margin-top: @size * @i;
    margin-bottom: @size * @i;
  }

  .pa-@{i} {
    padding: @size * @i;
  }
  .px-@{i} {
    padding-left: @size * @i;
    padding-right: @size * @i;
  }
  .py-@{i} {
    padding-top: @size * @i;
    padding-bottom: @size * @i;
  }

  each(@property, .(@prop-value, @prop-key) {
    each(@direction, .(@dir-value, @dir-key) {
      .@{prop-key}@{dir-key}-@{i} {
          @{prop-value}-@{dir-value}: @size * @i;
      }
    })
  })

  .space(@n, (@i + 1));
}

.space(25);
