scss， less 批量生成常用 margin，padding

// less
@list: 2, 5, 6, 10, 15, 20;
each(@list, {
  .mr@{value} {
    margin-right: @value * 1px;
  }
  .mt@{value} {
    margin-top: @value * 1px;
  }
  .mb@{value} {
    margin-bottom: @value * 1px;
  }
  .ml@{value} {
    margin-left: @value * 1px;
  }
  .pl@{value} {
    padding-left: @value * 1px;
  }
  .pt@{value} {
    padding-top: @value * 1px;
  }
  .pb@{value} {
    padding-bottom: @value * 1px;
  }
  .pr@{value} {
    padding-right: @value * 1px;
  }
});
/*mr10表示margin-right:10px,其他样式依次类推*/

// scss
$pixel: 5, 10, 15, 20, 25, 30, 40, 50;
$position: top, right, bottom, left;
$position-class: 't', 'r', 'b', 'l';
@each $item in $pixel {
  @each $p in $position {
    $index: index($position, $p);
    $class: nth($position-class, $index);
    .m#{$class}#{$item} {
        margin-#{$p}: $item + px;
    }
    .p#{$class}#{$item} {
        padding-#{$p}: $item + px;
    }
  }
}
/*mr10表示margin-right:10px,其他样式依次类推*/