Question

我正在尝试使用以下起始变量实现文本大小调整的模块化方法：

@ font-size：1.7rem; @ line-height：1.414;

我想写一个mixin来创建这个结果，但还没有完全掌握LESS：

h4 {
    font-size: @font-size * @line-height;
}
h3 {
    font-size: (@font-size * @line-height) * @line-height;
}
h2 {
    font-size: ((@font-size * @line-height) * @line-height) * @line-height;
}
h1 {
    font-size: (((@font-size * @line-height) * @line-height) * @line-height) * @line-height;
}

Answer 1

您的选择器有一个数组 - @elements。

然后得到@elements的长度 - 它将通过数组用作迭代器。然后循环开始。它的名称为set-font-size。在Less循环中是递归mixins。这个mixin需要一些参数并自行调用，直到某些条件正确为止。在此示例中，它在@_i > 0时有效。每当它自己调用时，@_i的值就会减少。

在mixin（或循环）中，您可以通过调用extract(@array, @index)命令从数组中获取当前元素。然后将字体大小设置为选择器。 Evry time mixin调用本身，font-size的值增加@_font-size * @_line-height。

这就是全部:) Codepen DEMO 。

减：

@elements: h1, h2, h3, h4;

@iterations: length(@elements); // lehgth of @elements

@font-size: 1.7rem;
@line-height: 1.414;

.set-font-size(@_i, @_elements, @_font-size, @_line-height) when (@_i > 0) {  
  @selector: extract(@_elements, @_i);

  @{selector} {
    font-size: @_font-size;
  }

  .set-font-size(@_i - 1, @_elements, @_font-size * @_line-height, @_line-height);
}

.set-font-size(@iterations, @elements, @font-size, @line-height);

Css输出：

h4 {
  font-size: 1.7rem;
}
h3 {
  font-size: 2.4038rem;
}
h2 {
  font-size: 3.3989732rem;
}
h1 {
  font-size: 4.8061481rem;
}

LESS循环创建模块化规模

1 个答案: