一使用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)); // 遞歸調(diào)用自身
}
.loop(200);
調(diào)用：
<div class="m-t-100 fz-30"></div>
使用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; }
}
調(diào)用：
<div class="m-t-100 fz-30"></div>
使用sass
$directions:("t":"top", "b":"bottom", "l":"left", "r":"right");
$dimensions:("p":"padding", "m":"margin");
//獲取padding margin間隔
@each $dim in $dimensions {
//循環(huán)四個(gè)方向
@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;
}
}
}
}
