关于sass:如何用less和sass生成paddingmargin的四个方向多个值

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

之前针对页面中的 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";
  }
});