遍历生成 padding margin ... 等类名

一使用less

方法一 (生成指定)

@0px: 0px;
.ml-loop(@list, @i: 1, @val: extract(@list, @i)) when (length(@list)>=@i) {
  .ml@{val} {
    margin-left: @val + @0px;
  }
  .ml-loop(@list, (@i+1));
}
@marginLeft: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 24, 30, 40, 48, 50, 75;
.ml-loop(@marginLeft);

方法二

.loop(@counter) when (@counter > 0) {
  .p-@{counter} {
    padding: (1px * @counter);
  }
  .p-t-@{counter} {
    padding-top: (1px * @counter);
  }
  .p-r-@{counter} {
    padding-right: (1px * @counter);
  }
  .p-b-@{counter} {
    padding-bottom: (1px * @counter);
  }
  .p-l-@{counter} {
    padding-left: (1px * @counter);
  }
  .m-@{counter} {
    margin: (1px * @counter);
  }
  .m-t-@{counter} {
    margin-top: (1px * @counter);
  }
  .m-r-@{counter} {
    margin-right: (1px * @counter);
  }
  .m-b-@{counter} {
    margin-bottom: (1px * @counter);
  }
  .m-l-@{counter} {
    margin-left: (1px * @counter);
  }
  .fz-@{counter} {
    font-size: (1px * @counter);
  }
  .loop((@counter - 1));    // 递归调用自身
}
 
.loop(200);

调用：

使用scss

@for $i from 1 through 200 {
  .m-#{$i} { margin: ($i/100)+rem; }
  .m-t-#{$i} { margin-top: ($i/100)+rem; }
  .m-b-#{$i} { margin-bottom: ($i/100)+rem; }
  .m-l-#{$i} { margin-left: ($i/100)+rem; }
  .m-r-#{$i} { margin-right: ($i/100)+rem; }
 
  .p-#{$i} { padding: ($i/100)+rem; }
  .p-t-#{$i} { padding-top: ($i/100)+rem; }
  .p-b-#{$i} { padding-bottom: ($i/100)+rem; }
  .p-l-#{$i} { padding-left: ($i/100)+rem; }
  .p-r-#{$i} { padding-right: ($i/100)+rem; }
 
  .fz-#{$i} { font-size: ($i/100)+rem; }
}

调用：

使用sass

$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 5 {
            $size: $i*5;
            .#{nth($dim,1)}-#{nth($dir,1)}-#{$size} {
                #{nth($dim,2)}-#{nth($dir,2)}: #{$size}px;
            }
        }
    }
}