@unit: 8;
@dimensions: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
@directions: top, bottom, left, right;

.outer(@i: 1) when (@i <= length(@directions)) {
  @direction: extract(@directions, @i);

  .inner(@j: 1) when (@j <= length(@dimensions)) {
    @classname: extract(@dimensions, @j);
    @dimension: extract(@dimensions, @j) * @unit;

    .margin-@{direction}-@{classname}x {
      margin-@{direction}: ~'@{dimension}px';
    }
    .padding-@{direction}-@{classname}x {
      padding-@{direction}: ~'@{dimension}px';
    }

    @media (min-width: 769px) {
      .margin-@{direction}-@{classname}x-desktop {
        margin-@{direction}: ~'@{dimension}px';
      }
      .padding-@{direction}-@{classname}x-desktop {
        padding-@{direction}: ~'@{dimension}px';
      }
    }

    @media (max-width: 768px) {
      .margin-@{direction}-@{classname}x-mobile {
        margin-@{direction}: ~'@{dimension}px';
      }
      .padding-@{direction}-@{classname}x-mobile {
        padding-@{direction}: ~'@{dimension}px';
      }
    }

    .inner(@j + 1);
  }

  .inner();
  .outer(@i + 1);
}

.outer();