前端时间搭建前端框架时，遇到的一个小问题记录下：
之前针对页面中的padding和margin设置不同值都会在公共样式文件下进行单独设置，如下图，想到less和sass都支持函数操作，对代码进行优化。
文章图片
sass代码：
/*
*动态生成padding和margin值
*$position四个位置的简写设置
*$typepadding个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和sass生成padding、margin的四个方向多个值（）】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";
}
});
