Question

我有以下少量代码：

.loop (@index) when (@index >= 10) {
  (~".font@{index}") {
    font-size: ~"@{index}px";
  }
  .loop(@index - 1);
} 
.loop (0) {}
.loop (10);

输出：

.font15 {
  font-size: 15px;
}
.font14 {
  font-size: 14px;
}
.font13 {
  font-size: 13px;
}
.font12 {
  font-size: 12px;
}
.font11 {
  font-size: 11px;
}
.font10 {
  font-size: 10px;
}

在 Less 文档的最后，我有这个课程：

.title{
    font-size:14px;
    margin-bottom:0.5em;
    .font13;
}

我正在使用WinLess来编译它，我得到一个错误，说“.font13”未定义有没有办法在同一个文档中使用“动态”定义的类？

谢谢！

Answer 1

不幸的是。选择器插值只是字符串插值，然后将字符串打印到CSS中，因此在Less运行中不会生成类对象。

所以做这样的事情的最好方法是设计一个 getter mixin （你可以从其他规则调用），也许是一个生成器mixin（写.font10， .font11，... .fontNN类）...如果你只想在循环中生成类，那么后者是没有必要的（你可以将它与循环合并）。

这样的事情：

.getFont(@size) { font-size: ~"@{size}px"}

.genFontClass (@size) {
   (~".font@{size}") { .getFont(@size); }
}

然后您可以使用循环生成.fontNN类：

.loop (@index) when (@index >= 10) {
    .genFontClass (@index);
    .loop(@index - 1);
} 
.loop (@index) when (@index < 10) {}

使用例如索引13：

.loop (13);

输出 CSS：

.font13 {
  font-size: 13px;
}
.font12 {
  font-size: 12px;
}
.font11 {
  font-size: 11px;
}
.font10 {
  font-size: 10px;
}

并且独立于直接打印到输出CSS的这些生成的类（并且无法从其他Less规则中访问），您可以调用getter mixin，为规则添加所需的属性，在我们的示例中为所需的字体指数13：

.title{
    margin-bottom:0.5em;
    .getFont(13);
}

现在将字体大小属性添加到.title规则。

<强> CSS：

.title {
  margin-bottom: 0.5em;
  font-size: 13px;
}

希望这有帮助。

较少 - 使用在受保护的mixins中创建的类

1 个答案: