时间戳

首页 > 解决方案 > 如何在 LESS 中使用循环来为排版创建特定的类名？

css - 如何在 LESS 中使用循环来为排版创建特定的类名？

问题描述

我想生成 9 个排版类，每个都有以下内容：

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

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

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

@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 { }

ETC...

我也不依赖于 LESS，所以如果有更好的 CSS 预处理器语言，那么我很乐意使用它 :)

谢谢！

标签： csssassless

解决方案

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

.for(@list, @code) {
  & {
    .loop(@i: 1) when (@i =< length(@list)) {
      @value: extract(@list, @i);
      @code();
      .loop(@i + 1);
    }
    .loop();
  }
}

@elements: small, caption, body, subheader, title, headline;

.for(@elements, {
  @remfont: @i+1;
  @remline: ((@i+1) * 1.5 / 3);
  .@{value} {
    font-size: ~"@{remfont}rem";
    line-height: ~"@{remline}rem";
  }
});

推荐阅读