spaces.less

/**
 * Some spaces (margin or padding) atomic classes
 */

@spaceProps: margin, padding;
@spacePropShortands: m, p;
@directions: top, right, bottom, left;
@directionShortands: t, r, b, l;
@spaceValues: 0, 4, 8, 16;

.generate-all-spaces(@spaceProps, @spacePropShortands, @i) when (@i > 0) {
  .generate-all-spaces(@spaceProps, @spacePropShortands, (@i - 1));

  @spaceProp: extract(@spaceProps, @i);
  @spacePropShortand: extract(@spacePropShortands, @i);

  .iterate-values(@spaceValues, @j) when (@j > 0) {
    .iterate-values(@spaceValues, (@j - 1));

    @value: extract(@spaceValues, @j);
    .@{spacePropShortand}-@{value} {
      @{spaceProp}: unit(@value, px);
    }
  }
  .iterate-values(@spaceValues, length(@spaceValues));

}
.generate-all-spaces(@spaceProps, @spacePropShortands, length(@spaceProps));


.generate-individual-spaces(@spaceProps, @spacePropShortands, @i) when(@i > 0) {
  .generate-individual-spaces(@spaceProps, @spacePropShortands, @i - 1);

  @spaceProp: extract(@spaceProps, @i);
  @spacePropShortand: extract(@spacePropShortands, @i);

  .iterate-directions(@directions, @directionShortands, @j) when(@j > 0) {
    .iterate-directions(@directions, @directionShortands, @j - 1);

    @direction: extract(@directions, @j);
    @directionShortand: extract(@directionShortands, @j);

    .iterate-values(@spaceValues, @k) when (@k > 0) {
      .iterate-values(@spaceValues, @k - 1);

      @value: extract(@spaceValues, @k);
      .@{spacePropShortand}-@{directionShortand}-@{value} {
        @{spaceProp}-@{direction}: unit(@value, px);
      }
    }
    .iterate-values(@spaceValues, length(@spaceValues));
  }
  .iterate-directions(@directions, @directionShortands, length(@directions));
}

.generate-individual-spaces(@spaceProps, @spacePropShortands, length(@spaceProps));