scss.less生成margin，padding

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"