less

// 循环生成 margin padding
.padding(@n, @i: 1) when (@i =< @n) {.pt-@{i} {padding-top: @i + 0px;}.pr-@{i} {padding-right: @i + 0px;}.pb-@{i} {padding-bottom: @i + 0px;}.pl-@{i} {padding-left: @i + 0px;}.p-@{i} {padding: @i + 0px;}.padding(@n, (@i + 1));
}.margin(@n, @i: 1) when (@i =< @n) {.mt-@{i} {margin-top: @i + 0px;}.mr-@{i} {margin-right: @i + 0px;}.mb-@{i} {margin-bottom: @i + 0px;}.ml-@{i} {margin-left: @i + 0px;}.m-@{i} {margin: @i + 0px;}.margin(@n, (@i + 1));
}.padding(200);
.margin(200);

scss

// 循环生成 margin padding
@for $i from 0 through 200 {.m-#{$i} {margin: $i + px !important;}.mt-#{$i} {margin-top: $i + px !important;}.mb-#{$i} {margin-bottom: $i + px !important;}.ml-#{$i} {margin-left: $i + px !important;}.mr-#{$i} {margin-right: $i + px !important;}.p-#{$i} {padding: $i + px !important;}.pt-#{$i} {padding-top: $i + px !important;}.pb-#{$i} {padding-bottom: $i + px !important;}.pl-#{$i} {padding-left: $i + px !important;}.pr-#{$i} {padding-right: $i + px !important;}
}