less - 简化重复的LESS

Question

我正在为 WordPress 网络创建一个主题系统，该系统支持多种布局主题，可以支持各种大学的配色方案。为此，我定期编译一个包含学校特定变量的 LESS 文件(使用 lessphp)，并将其用作主题中的辅助类库。

每所学校在 LESS 中定义了 3 种颜色:@primary、@secondary 和 @tertiary。该方法简单明了且实用，但需要在代码中进行大量重复。例如:

//Modifier Classes
  .primary-lighter-text {
      color: lighten(@primary,20);
  }
  .sec-lighter-text {
      color: lighten(@secondary,20);
  }
  .tert-lighter-text {
      color: lighten(@tertiary,20);
  }
//Backgrounds
  .primary-bg {
      background-color: @primary;
  }

  .sec-bg {
      background-color: @secondary;
  }

  .tert-bg {
      background-color: @tertiary;  
  }

//Borders
  .primary-border{
      border-color: @primary;
  }
  .sec-border {
      border-color: @secondary;
  }
  .tert-border {
      border-color: @tertiary;      
  }

从 LESS 的角度来看并没有什么复杂的，但是如果我想添加一个新的助手类，我必须创建 3 个。有没有更简洁的方法来实现这个？

Answer 1

您可以使用数组循环来简化它。在添加新内容的情况下，您只需修改末尾的数组变量即可。

.loop-column(@index) when (@index > 0) { /* Recursive Mixin with Guard condition. Mixin is processed only when the condition is satisfied */
  .loop-column(@index - 1); /* Call the mixin again with a decremented counter */
  @ctype:  extract(@type, @index); /* Extract the type value corresponding to the index from the array */
  @color:  extract(@colors, @index); /* Extract the color value corresponding to the index from the array */

  /* Form and Output the necessary classes and properties */
  .@{ctype}-lighter-text { /* Selector interpolation to dynamically form the selector */
    color: lighten(@color,20);
  }
  .@{ctype}-bg {
    background-color: @color;
  }
  .@{ctype}-border{
    border-color: @color;
  }  
}

.loop-column(length(@type));

@type: primary, sec, tert; /* The color types array */
@colors:#fff, #777, #000; /* The color value array for each type */
/* If required the colors can be kept as separate variables also. Refer 2nd demo. */

Demo | Demo 2

更新:(基于 Andrew Cafourek 和 seven-phases-max 的评论)

由于 LessPHP 已过时，应添加以下行并将 length(@type) 替换为实际计数。

.loop-column(0) {};
.loop-column(4);