LESSは、コードを標準CSSにコンパイルする動的スタイルマークアップ言語です。 LESSは変数*、操作、関数（非拡張セット）、およびパラメーターを受け取ることができるmixin **を使用します。 コンパイル時のミックスインはスタイルに置き換えられます。 操作と機能-計算結果による。
問題
パラメータを受け入れるミックスインを宣言する場合、デフォルトのパラメータ値を指定する必要があります。 これにより、必要に応じて、パラメーターのすべてまたは一部を渡さずにmixinを呼び出すことができます。 しかし、LESSのmixinは、名前付きパラメーターをまだサポートしていません。 つまり、mixinが10個のパラメーターで宣言されており、10番目の値のみを順番に変更する必要がある場合、前の9個も渡す必要があります。 はい、デフォルト値で。
ベースライン
マークアップ
<div class="base-1"> "BASE-1" </div> <div class="extension"> "EXTENSION" </div> <div class="base-2"> "BASE-2" </div>
少ないスタイル
/* - */ .f-border ( @width: 4px, @style: solid, @color: #BE2 ) { border: @width @style @color; } /* */ .base-1 { .f-border; } /* c */ /* */ .extension { .f-border(4px, solid, #F16); } /* */ .base-2 { .f-border; }
結果
jsFiddle.netのソースコード***。
問題
.extension
クラスでは、1つの可変パラメーターの代わりに3つまでが
.extension
に渡され、そのうち2つはデフォルト値と一致します。 この特定のケースでは、パラメーターがほとんどないため、これは問題ではありません。 しかし、たとえば、複雑なユーザーインターフェイスに関連する私のプロジェクトでは、タブスタイルを生成するためのミックスインには18個のパラメーターが必要です。 明らかに、大規模プロジェクトでのLESSの利点は、名前付きパラメーターが存在しないため、大幅に割引きされます。
解決策
ここでは、変数とミックスインの範囲が役立ちます。 デフォルトのパラメーター値は変数に移動できます。 ミックスインを宣言する場合、上記の変数をデフォルト値としてそれに渡します。 クラスからミックスインを呼び出す前に、可変パラメーターの変数を変更します。 パラメーターなしで（またはいくつかのパラメーターを順番に）ミックスインを呼び出します。 クラスのスコープ内で変数が変更されるため、変更された値でミックスインが呼び出されます。 スコープを離れると、変数は事前に定義された値に戻ります。
少ないスタイル
/* */ @f-border-width: 4px; @f-border-style: solid; @f-border-color: #BE2; /* */ /* - - */ .f-border ( @width: @f-border-width, @style: @f-border-style, @color: @f-border-color ) { border: @width @style @color; } /* */ .base-1 { .f-border; } /* */ /* */ .extension { @f-border-color: #F16; .f-border; } /* */ .base-2 { .f-border; }
結果
jsFiddle.netのソースコード。
注：
* LESSの公式Webサイトでは、「変数は再定義できないため、実際には定数です」と書かれています。 しかし、 別の視点があります 。
**「混合物」としての元の「ミクシン」の翻訳には支持者がいるという事実にもかかわらず、借用は外部コンテキストなしで意味が同一であるため、借用用語と技術は言語にとってより有機的です。
*** jsFiddle.netでLESSを使用するには、リソースを介してless.jsファイルを接続し、javascript編集パネルに2行を追加する必要があります
document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].type = 'text/less'; less.refreshStyles();