less和scss循环生成margin和padding

本文主要是介绍less和scss循环生成margin和padding，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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;}
}

这篇关于less和scss循环生成margin和padding的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---