如何在LESS中使用循环为印刷术创建特定的类名？

Question

我想生成9个印刷类，每个印刷类具有以下内容：

font-size: 2rem;
line-height: 1rem;

我将对字体大小和行高使用标准的印刷乘法器。我想知道是否有一种更优雅的方法可以使用LESS在循环中生成它们，而不是对所有这些CSS类进行硬编码。

我从另一个线程找到了以下内容：

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

哪个生成：

.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}

这非常接近，但是我希望我的班级名称更“具名”。如何使用循环为以下类生成类：

.small { }
.caption { }
.body { }
.subheader { }
.title { }
.headline { }

等...

我也不局限于LESS，所以如果有更好的CSS预处理器语言，那么我很乐意使用它：）

谢谢！

Answer 1

文档中的示例，用于进一步修改；） 对于更复杂的代码，最好使用scss而不是更少

Schema