2022-06-22 随笔 巧妙使用 less 函数批量生成class类

巧妙使用 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;
}
...
...