何が少ないのか、私は説明しません。 しかし、私はいくつかの言葉を言います。
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; } .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();