LESS margin generators

html, body {
  background: transparent !important;
  overflow: hidden;
}

.generate-mt(10);

.generate-mt(@n, @i: 1) when (@i =< @n) {
  .mt-@{i} {
    margin-top: @i*10px;
  }
  .generate-mt(@n, (@i + 1));
}

.generate-mb(10);

.generate-mb(@n, @i: 1) when (@i =< @n) {
  .mb-@{i} {
    margin-bottom: @i*10px;
  }
  .generate-mb(@n, (@i + 1));
}

.generate-ml(10);

.generate-ml(@n, @i: 1) when (@i =< @n) {
  .ml-@{i} {
    margin-left: @i*10px;
  }
  .generate-ml(@n, (@i + 1));
}

.generate-mr(10);

.generate-mr(@n, @i: 1) when (@i =< @n) {
  .mr-@{i} {
    margin-right: @i*10px;
  }
  .generate-mr(@n, (@i + 1));
}