巧妙使用 less 函数批量生成class类
@base-size: 4; // 生成样式的基数
@max-size: 64; // 生成的最大值
// @class: 生成的class类名前缀
// @attribute: 使用的属性
.generate(@class, @attribute) {
.loop(@n) when (@n <= @max-size) {
.@{class}-@{n} {
@{attribute}: 1px * @n !important;
}
.loop(@n + @base-size);
}
.loop(0)
}
.generate(m-t, margin-top);
.generate(m-b, margin-bottom);
.generate(m-l, margin-left);
.generate(m-r, margin-right);
.generate(p-t, padding-top);
.generate(p-b, padding-bottom);
.generate(p-l, padding-left);
.generate(p-r, padding-right);
生成对应的css
.m-t-0 {
margin-top: 0px !important;
}
.m-t-4 {
margin-top: 4px !important;
}
.m-t-8 {
margin-top: 8px !important;
}
.m-t-12 {
margin-top: 12px !important;
}
.m-t-16 {
margin-top: 16px !important;
}
...
...
