3

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

每所学校都有 3 种颜色在 LESS 中定义为@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。有没有更简洁的方法来实现这一点？

4

1 回答 1

3

您可以通过使用数组循环来简化它。如果有新添加，您需要修改的只是最后修改数组变量。

.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. */

演示| 演示 2

更新：（基于Andrew Cafourek和7-phases-max 的评论）

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

.loop-column(0) {};
.loop-column(4);
于 2014-07-15T12:38:21.250 回答