less使用each遍历对象循环赋值
进行项目开发时，经常可以遇到多个margin、padding、font-size等，可能有5、10、20等不同的值，这个时候就需要进行each遍历循环赋值了
margin
top/right/bottom/left
/** 定义需要遍历的对象 */
@marAndPadAndFontList: {
4: 4px;
5: 5px;
8: 8px;
10: 10px;
12: 12px;
14: 14px;
15: 15px;
16: 16px;
18: 18px;
20: 20px;
22: 22px;
24: 24px;
26: 26px;
28: 28px;
32: 32px;
36: 36px;
40: 40px;
}
each(@marAndPadAndFontList, {
.mt-@{key} {
margin-top: @value;
}
.mr-@{key} {
margin-right: @value;
}
.mb-@{key} {
margin-bottom: @value;
}
.ml-@{key} {
margin-left: @value;
}
.mg-@{key} {
margin: @value;
}
});
padding
top/right/bottom/left
each(@marAndPadAndFontList, {
.pt-@{key} {
padding-top: @value;
}
.pr-@{key} {
padding-right: @value;
}
.pb-@{key} {
padding-bottom: @value;
}
.pl-@{key} {
padding-left: @value;
}
.pg-@{key} {
padding: @value;
}
});
font-size
each(@marAndPadAndFontList, {
.fs-@{key} {
font-size: @value;
}
});
其他css赋值一样使用即可
使用
<div class="mt-12 pt-12 fs-12"></div>
<div class="mr-12 pr-12 fs-14"></div>
<div class="mb-12 pb-12 fs-16"></div>
<div class="ml-12 pl-12 fs-20"></div>
<div class="mg-12 pg-12 fs-22"></div>
