scss生成margin,padding
$directions:('t': 'top', 'b': 'bottom', 'l': 'left', 'r': 'right');
$dimensions:('p': 'padding', 'm': 'margin');
//获取padding margin间隔
@each $dim in $dimensions {
//循环四个方向
@each $dir in $directions {
@for $i from 1 through 50 {
$size: $i*1;
.#{nth($dim,1)}#{nth($dir,1)}-#{$size} {
#{nth($dim,2)}-#{nth($dir,2)}: #{$size}px;
}
}
}
}
// 最后生成1-50的margin,padding
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pr-15 { padding-top: 15px; }
.pr-20 { padding-top: 20px; }
.pl-25 { padding-top: 25px; }
.pl-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
less生成margin,padding
// 函数
.boxModel(@prefix, @attr) {
.set(@value) {
@class: ~"@{prefix}-@{value}";
.@{class} {
@{attr}:~"@{value}px";
}
}
.loop1(@index: 0) when (@index <=15) {
.set(@index);
.loop1(@index + 1);
}
.loop1();
@list: range(20, 50, 5);
.loop2(@index: 1) when (@index <=length(@list)) {
@value: extract(@list, @index);
.set(@value);
.loop2(@index + 1);
}
.loop2();
}
// 调用
.boxModel(p, padding);
.boxModel(pl, padding-left);
.boxModel(pr, padding-right);
.boxModel(pt, padding-top);
.boxModel(pb, padding-bottom);
.boxModel(m, margin);
.boxModel(ml, margin-left);
.boxModel(mr, margin-right);
.boxModel(mt, margin-top);
.boxModel(mb, margin-bottom);
// 最后页面直接使用 class="mr-1 mr-5 pl-5 pt-5"