简化重复的LESS [英] Simplifying Repetitive LESS

问题描述

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

I am creating a themeing system for a WordPress network that supports multiple layout themes that can support color schemes for a variety of universities. To do so, I periodically compile a LESS file (using lessphp) with school-specific variables and essentially use it as a library of helper classes in the themes.

每个学校在LESS中定义3种颜色:@primary，@secondary和@tertiary.该方法简单，功能丰富，但在代码中重复很多.例如:

Each school has 3 colors defined in LESS as: @primary, @secondary and @tertiary. The method is straightforward and functional but requites a lot of repetition in the code. For example:

//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.实现这一目标的方法是否更简洁?

Nothing complicated from a LESS standpoint, but if I want to add a new helper class, I have to create 3. Is there a more succinct way to achieve this?

推荐答案

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

You can simplify it by making use of array loops. All you have to modify in case of a new addition would be to modify the array variables at the end.

.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 和seven-phases-max )

由于LessPHP已过时，因此应添加以下行，并用实际计数替换length(@type).

Since LessPHP is outdated, the following line should be added and the length(@type) should be replaced with the actual count.

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

这篇关于简化重复的LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！