Generate class names like inline styles

genCommonClassName.less

@sizes: 0, 5, 8, 10, 15, 20, 25, 30, 45;

@sides: {
  l: -left;
  r: -right;
  t: -top;
  b: -bottom
}

.gen-space(@sizes; @sides; @index) when (@index>0) {
  .gen-space(@sizes; @sides; @index - 1);

  @size : extract(@sizes, @index);

  .mx@{size} {
    margin-left: (@size * 1px);
    margin-right: (@size * 1px);
  }

  .px@{size} {
    padding-left: (@size * 1px);
    padding-right: (@size * 1px);
  }

  .my@{size} {
    margin-top: (@size * 1px);
    margin-bottom: (@size * 1px);
  }

  .py@{size} {
    padding-top: (@size * 1px);
    padding-bottom: (@size * 1px);
  }

  .m@{size} {
    margin: (@size * 1px);
  }

  .p@{size} {
    padding: (@size * 1px);
  }

  each(@sides, .(@v, @k, @i) {
      .m@{k}@{size} {
        margin@{v}: (@size * 1px);
      }

      .p@{k}@{size} {
        padding@{v}: (@size * 1px);
      }

    }

  );

}

.gen-space(@sizes; @sides; length(@sizes));


@widths: 60, 80, 90, 100, 120, 140, 150, 160, 170, 180, 200, 220, 250, 300, 320, 350, 400;

each(@widths, {
    .w@{value} {
      width: (@value * 1px);
    }

    .h@{value} {
      height:(@value * 1px);
    }

  }

);

@pcts: 10, 15, 20, 25, 33, 46, 50, 64, 66, 75, 80, 85, 90, 100;

each(@pcts, {
    .pct@{value} {
      width: (@value * 100% / 100);
    }

  }

);