前端工夫搭建前端框架时，遇到的一个小问题记录下：
之前针对页面中的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"; }});