3

さまざまな大学の配色をサポートできる複数のレイアウト テーマをサポートする WordPress ネットワーク用のテーマ システムを作成しています。そうするために、定期的にLESSファイルを（lessphpを使用して）学校固有の変数でコンパイルし、基本的にそれをテーマのヘルパークラスのライブラリとして使用しています。

@primary各学校には、LESS で次の3 つの色が定義されてい@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とSeven -phases-maxからのコメントに基づく)

LessPHP は古いため、次の行を追加length(@type)し、実際のカウントに置き換えます。

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