如何用less和sass生成padding、margin的四个方向多个值？

前端时间搭建前端框架时，遇到的一个小问题记录下：

之前针对页面中的padding和margin设置不同值都会在公共样式文件下进行单独设置，如下图，想到less和sass都支持函数操作，对代码进行优化。

sass代码：

 /*
 *  动态生成padding和margin值
 *  $position  四个位置的简写设置
 *  $type  padding个margin的简写设置
 *  form 1 throught 6 是循坏1-6的值，设置出来的边距最大距离是30，如果需要其他的可以继续添加
 *  $val: $i*5 是设置距离步长是5的倍数
 */ 
 $position:("t":"top", "b":"bottom", "l":"left", "r":"right");
 $type:("p":"padding", "m":"margin");
 @each $item in $type {
     @each $list in $position {
         @for $i from 1 through 6 {
             $val: $i * 5;
             .#{nth($item,1)}#{nth($list,1)}#{$val} {
                 #{nth($item,2)}-#{nth($list,2)}: #{$val}px;
             }
         }
     }
 }

less 边距设置

// 边距
@arr: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50;

each(@arr, {
  @num:extract(@arr, @index);
  .mt@{value} {
    margin-top:~"@{num}px";
  }
  .mr@{value} {
    margin-right:~"@{num}px";
  }
  .mb@{value} {
    margin-bottom:~"@{num}px";
  }
  .ml@{value} {
    margin-left:~"@{num}px";
  }
  .pt@{value} {
    padding-top:~"@{num}px";
  }
  .pr@{value} {
    padding-right:~"@{num}px";
  }
  .pb@{value} {
    padding-bottom:~"@{num}px";
  }
  .pl@{value} {
    padding-left:~"@{num}px";
  }
});