Less.js: 「デフォルト」変数のサポートを追加します（SASSの！defaultと同様）

ドキュメントを参照してください。

更新：将来の訪問者を混乱させないために、この投稿の以前のコメントを削除しました（ここでは、「変数がまだ定義されていない場合に変数を定義する方法」の質問に答えようとしていて、「XY問題」であり、 Sass-like !defaultは次のとおりです。Lessでは、必要な機能（ "使用後の（再）定義"）がLess変数の動作方法によってすでに提供されているため、そのようなものは必要ありません。

同じ変数を2回定義すると、最後の宣言が優先され、スコープ全体で有効になります。 したがって、別のオプションは、変数を通常どおりに宣言し、ライブラリの後に変数を含めるようにユーザーに依頼することです。

library.less

<strong i="7">@width</strong>: 0;
.mixin {
  width: @width;
}

user.less：

<strong i="11">@import</strong> "library.less"; //first declaration of <strong i="12">@width</strong>
<strong i="13">@width</strong>: 1; //this will override <strong i="14">@width</strong> defined previously
.class {
  .mixin();
}

コンパイル：

.mixin {
  width: 1;
}
.class {
  width: 1;
}

PRに関するフィードバックをありがとうございます。 これらのソリューションは、消費するものが1つまたはいくつかあれば、実行可能です。 それでは、これらのソリューションが私たちの場合に機能しない理由について詳しく説明します。

クラス階層として実装されたコンポーネントの大規模なフレームワークを作成します。 各コンポーネントの変数は、ベーステーマの独自のファイルで宣言します。 次に、この変数を変更するテーマをここから「派生」させます。 ユーザーはさらにそうすることで、テーマをニーズに合わせて調整できます。

さらに、変数は他の変数から「派生」することがよくあります。 これは最も明白なベースカラーです。 私たちは、テーマと独自の継承動作を組み合わせた積極的な変数値の伝播を使用して、コンポーネントの大規模なクラス階層の問題の代替案について議論することに多くの時間を費やしてきました。

これらの問題に対する最善の解決策は、変数を「！default」（Sass用語で）として_常に_定義することです。 これにより、ユーザーは、これらの値を使用してさらに値を計算する前に、最初に取得して値を設定するだけで済みます。 そうすれば、タイミングはユーザーにとって非常に簡単に管理できます。 これはすべてのテーマのすべての変数に常に当てはまるため、上記で提案したような構文の問題は非常に負担が大きく、エラーが発生しやすくなります。

今後もLessに他の機能を提供していきたいと思います。 私たちの（異常な？）大規模なユースケースは、言語/機能セットをスケールアップするために何が必要かを検証するのに役立つと思います。

これをマージすることを検討するか、より宣言的な性質を持ついくつかの代替案を提供することを願っています。 スコープのトリックを利用することは、実際にはうまくいきません。

お手数をおかけしますが、よろしくお願いいたします。

ストレートクラスではなく、ミックスインを定義したほうがよいようです。 次に、変数をメインスタイルシートまたは別の派生テーマの後半でオーバーライドできます。 これにより、グリッドをインポートした後、グリッドのガター幅などをオーバーライドできます。

明確にするために、ここでは変数についてのみ話します。 また、メインのスタイルシートはありません。テーマごとにクラスごとに1つあります。 :)

たぶん私はあなたの提案に従っていませんが、例として、私たちのテーマ変数ファイルの1つは次のようになります：

$panel-base-color: $neutral-light-color !default;
$panel-header-color: $base-color !default;
$panel-frame-border-width: 1px !default;
$panel-header-font-size: round($font-size * 1.15) !default;
$panel-body-border-color: $neutral-dark-color !default;

$panel-light-header-color: #000 !default;
$panel-light-header-background-color: #fff !default;
$panel-light-tool-background-image: 'tools/tool-sprites-dark' !default;
$panel-light-body-border-color: $neutral-dark-color !default;
$panel-ignore-frame-padding: true !default;

このファイルは、4つの深さの基本テーマのチェーンを持つテーマのさまざまなPanel値を設定します。 これらの基本テーマにはPanelの独自の変数値がありますが、これらは最初にロードされるため、オーバーライドします。 ユーザーテーマがこのテーマから派生し、独自の値を提供しない限り。

このパターンは繰り返されます_たくさん_:)

さて、メインの少ないシートで@panel-base-colorをオーバーライドしてみませんか？ LESS変数はグローバルであるため、最後に発生した変数が勝者です。

<strong i="7">@import</strong> 'theme.less';

@panel-base-color: red;

これで、テーマで使用されている場所が上書きされます。 インポートチェーンの下流でこれをオーバーライドする人がいない場合は、最初に設定されていたものがデフォルトになります。

「メインレスシート」はありません:)あなたの助けと提案に感謝しますが、これについては社内で多くの議論があり、少しの間続く傾向があります。 ここで提案したように、デフォルトの変数設定が必要であると考えていると言えば十分です。 この機能はSassに存在し、複雑さを軽減し、テーマを構成する際の柔軟性をユーザーに提供するのに非常に役立つことがわかりました。

これがすべて、このプルリクエストまたは同様の派生物が受け入れられることを意味するのかどうか、私は興味がありますか？ それが好ましくない場合は、構文を微調整できれば幸いです。

「メインレスシート」はありません:)

上記の回答の「メインの少ないシート」を「ユーザーの少ないシートのいずれか」に置き換えるだけです。 これまでのところ、SASS !default （構文が何であれ）は、LESSには存在しない問題を解決するために考案されたようです。
@dongryphon 、もちろん間違っている可能性がありますが、 @SomMeriと@Soviutによって提案されたソリューションを使用できない理由をまだ理解していません。

別の言い方をすれば、インポートしておらず、代わりにすべての変数が同じシートにある場合を想像してみてください。 それは事実上、インポートが行うことです。 したがって、そのような状況で、同じ名前の2つの変数宣言がある場合、シートの最後の宣言が優先されます。

@base-color: green;

div {
    background: @base-color;
}

@base-color: red;

最後にベースカラーが再度宣言されるため、divで使用されるベースカラーは赤になります。 次のようにコンパイルされます。

div {
    background: red;
}

これは以前に出てきたもので、実際には実装されていたと思います。ブートストラップでそれを望んでいた人からプルリクエストがあり、いくつかの議論の後で、それは無意味な機能であることに同意しました。

それができる唯一のことは、ユーザーがインポートする前に変数を定義することです。 その後、ユーザーがオーバーライドを定義すると、デフォルトがあるかのように機能します。これは、インポートされたファイルでも、使用後に定義された場合でも、cssと同じ方法で最後の定義を取得するためです。

ライブラリのユーザーにとって、インポート後に変数をオーバーライドする（またはインポート後に変数ファイルをインポートする）と言うのはそれほど負担ではありませんが、構文を追加するのは少ないです。これは、少ないことの利点の1つであり、 sassと同じ量を実行しますが、ほとんどの場合、構文は単純です。

これはJavaScriptプログラマーが考えるかもしれないこととは反対ですが、その背後にある考え方は、cssに近いということです。

消費者に注文を検討するよう求めることが不可能または望ましくない理由について詳しく教えてください。 強力なユースケースを持つ機能を受け入れますが、言語と複雑さの肥大化を回避するために厳密にする必要があります。

＃1109＃1104＃313を参照

明確にするために、私たちは一気に「ノー」と言っているのではありません。 私たちは彼のこの機能がすでに存在している可能性があることを示しようとしています。

less-docsにいくつかの情報を追加しました

すでに利用可能な（「少ない方法」で）機能（http://lesscss.org/features/#variables-feature-default-variables）を閉じる。

_syntax_が重複している間、SASSは上から下に「実行」しますが、LESSは実行せず、代わりにCSSのように動作するため、この混乱が頻繁に発生すると思います。 LESSはCSS+（追加機能を備えたCSS）のようなものであり、SASSは「CSS構文を備えたPHP」のようなものです。 （必要に応じて）その区別をする方法があるのだろうか。

消費者に注文を検討するよう求めることが不可能または望ましくない理由について詳しく教えてください。 強力なユースケースを持つ機能を受け入れますが、言語と複雑さの肥大化を回避するために厳密にする必要があります。

なぜなら、図書館のユーザー（および消費者）に、図書館のコードを自分で編集しないように教えるからです。 !default機能がないということは、これら2つのことのいずれかを実行する必要があることを意味します。どちらも同じように悪いimoです。

• ユーザーは、宣言されている変数を編集するために、ライブラリのスタイルシートを自分で編集する必要があります（これは一種の禁止事項であり、ライブラリの更新を困難にします）。
• ライブラリは2つのスタイルシートを提供する必要があります。1つはデフォルト変数用で、もう1つは実際のルール用です。 次に、ユーザーは最初の変数を@importしてから、独自の変数を宣言してから、2番目の変数を@importする必要があります。 特に、これら2つのファイルを同じバージョンに保つことは、本来あるべきよりも複雑です。

sassアプローチは、ライブラリが1つのファイルを提供するだけでよく、ユーザーがカスタマイズできることを意味します。

my-color: red;
<strong i="15">@import</strong> "./my-library.less";

それ以外の：

<strong i="19">@import</strong> "./my-library-variables.less";
my-color: red;
<strong i="20">@import</strong> "./my-library-rules.less";

この問題を再考する必要があると思います。

@arcanis実際、なぜあなたがそう思うのかわかりません：

ライブラリは2つのスタイルシートを提供する必要があります。1つはデフォルト変数用で、もう1つは実際のルール用です。
sassアプローチは、ライブラリが単一のファイルを提供するだけでよいことを意味します

Lessでは、これはまったく同じライブラリ設計です。

<strong i="11">@import</strong> "./my-library.less";
@my-color: red;

「Lazy-Loading」のことを見逃しているだけだと思います（ドキュメントでは、 no, thanks!から!defaultとまったく同じ例が使用されています）。

私はあなたが単に「遅延読み込み」のことを見逃していると思います

@ Seven-phases-max WTF、その通りです。 やめろ、私はおそらく私の返信全体を削除する必要があります（そしてちょうどしました）。 ブートストラップをインポートして、特定の変数をオーバーライドするだけで、うまくいくと言っていますか？

私はあなたを信じていませんでした、そしてそれを確かめるために私自身のテストをしました。 どうしてこれを逃したの？ これは、カスタマイズを含むBootstrapに関するすべての記事で、variables.lessファイルをコピーして独自の値を設定することを推奨しているためだと思います。もちろん、ライブラリに変数を追加すると問題が発生します。 そして、インポート直後にセレクターが出力されているような印象を受けたと思います。 変数は常にこのように「遅延読み込み」しましたか？

これは、Lessでよく見落とされる最も重要な機能の1つである必要があります。 この機能について言及しているLessまたはLessライブラリに関するブログ投稿を見たことがありません。 ここのスレッドのすべてとドキュメントがあっても、それが実際のライブラリで何を意味するのかはすぐにはわかりませんでした。 以前に宣言された変数を後で設定することでオーバーライドできると誰もが言っているだけだと思いましたが、以前にインポートされたドキュメントの変数の評価に影響することはありませんでした。

今まで手に入らなかったなんて信じられません。 これにより、基本的に、少ないドキュメントの構造に関するすべてが変更され、ドキュメントには出力を示さない小さな言及があります。

Lessで!default機能のリクエストが非常に多いのは、この機能を直感的に理解したり、ドキュメントの簡単な例から理解したりする人がほとんどいないためかもしれません（明らかに私を含む）。

少なくとも、@seven-phases-maxについてもう一度説明していただきありがとうございます。

うわー。 そうですね、その通りです。 私もドキュメントを誤解しました、私の悪いです！

@Soviutあなたはとんでもない天才です！ SASS/LESSで変数宣言がそのように機能することを私は知りませんでした。 ありがとう！

私はまだ額を平手打ちしているが、これは私がLessで書いた他のすべてのものでは明らかな振る舞いではなかった。 私の問題は、それを行う方法を理解していない人々によって書かれた貧弱な例の記事を見たということだったと思います。

また、次の点に注意してください： @spikesagalあなたのステートメントに関する限り：「変数宣言がSASS / LESSでそのように機能することを私は知りませんでした」-私の知る限り、変数の動作は2つの言語間で同じではありません。 SASSとLESSは物事を非常に異なって評価します。

そして彼らはSassに移動したためにBS4でこの機能を殺しています...：-1：その移動についてはまだかなり悲しいです。

それで、それは始まります、より多くの！default変数のための戦い：[twbs / bootstrap＃17418]

ええと、SCSSソースをなんらかの方法で変更してLess機能を強制終了することはできません。 （技術的には、それは「機能」（ある種の「合成された振る舞い」のような）ではなく、遅延評価の基本的な特性/結果です）。 BSのバージョンが少なく（これは、それに貢献する意思のある人の数の問題です）、少なくとも1つのグローバル変数がある限り、いつでもその変数をオーバーライドできます。

良い。 ブートストラップの公式v4-alphaはSassに移動しました。 それは、少なくとも私の理解では、公式ドキュメントでは殺害が少なくなっています-これは、Sassには遅延読み込み変数などがないため、この機能のサポートも殺害することを意味します。 それらは！defaultのみをサポートします。これは、ある意味で、次のことを意味します。 ！defaultを省略するだけで変数を作成できます。かなり面倒で、ファイル内のdarnセレクター全体をオーバーライドする必要があります。対処してください。」

これは、Sassには遅延読み込み変数などがないため、この機能のサポートも終了することを意味します。

まあ、これは「彼らはブートストラップでそれを殺す」という意味だけです（これは明らかにこのスレッドの範囲外のものです-BSのLessバージョンがない限り、_this_リポジトリのブートストラップ機能を気にする必要はありませんか？）。

この議論は、ブートストラップで変数をオーバーライドすることに関するものだったので...

私たちはより少ない：smile：に固執しています

最初に述べたジレンマのユースケースがあります。 次の簡略化された例を考えてみましょう。

1. h1のフォントサイズを定義するファイルが少なくなっています。
   <strong i="8">@font_size__h1</strong> = 30px;
2. 私は（より良いフレーズがないために） @font_size__h1宣言を使用する別のLESSファイルを含むプラグインを持っています。 だから私はそれを<strong i="12">@import</strong> (reference) "path/to/file.less";します。 問題ありません、利用可能になりました。
3. 今、私はその「プラグイン」を、どこにも@font_size__h1が定義されていない新しいサイトに持ち込みます。 この時点で、「 @font_size__h1が定義されている場合は、その値を使用します。定義されていない場合は、ここで定義した値を使用します」と言うとよいでしょう。

私が見る限り、項目3は現在不可能です。

@theMikeD

私が見る限り、項目3は現在不可能です。

スレッドを読んだようには見えません：

<strong i="10">@import</strong> "path/to/file.less";
<strong i="11">@import</strong> "here.less"; // if it's not defined <elsewhere>, then use the value I define <here>
<strong i="12">@import</strong> "elsewhere.less";

もちろん、これは次のように減らすことができます。

<strong i="16">@import</strong> "path/to/file.less"; // <- define default value there
@font-size-h1: foo;          // if it's not defined here then use the value defined above

これは基本的にhttp://lesscss.org/features/#variables-feature-default-variablesと同じ例です。

ええ、私はスレッドを読みました。 あなたの例には私の質問が逆になっているので、あなたは私が何を求めているのか理解していないようです。

もちろん、これは次のように減らすことができます。
@import "path / to / file.less"; //<-そこにデフォルト値を定義します
@ font-size-h1：foo; //ここで定義されていない場合は、上記で定義された値を使用します

これは私が必要としているものの反対です。 これにより、 path/to/file.lessの@font-size-h1の値が、何があってもローカル値で上書きされます。 必要なのは、次の場合にのみ使用されるローカルファイルの値です。
a） path/to/file.lessがロードされていない、または
b）'@ font_size__h1 is not set in path / to/file.less`の値

IOW @font-size-h1: foo;のローカル値は常にローカルファイルに存在しますが、 path/to/file.lessに設定されている場合はオーバーライドする必要があります

いずれにせよ、私は昨夜解決策を見つけました。それは、最初にローカル値を割り当て、次に@importステートメントをファイルの最初ではなく最後に置くことです。 見つかった場合は、ローカル値を上書きします。

とにかくありがとう。

あなたは私が何を求めているのか理解していないようです

ビューを更新するために、変数の少ない基本から始めることをお勧めします。

• 遅延評価
• 可変セマンティクス
• 世界で最も誤解されている...

（これは、すべてを命令型のC / PHPのような方法で考えようとしているように見えるのに対し、Less / CSSでは完全に「宣言型の逆さま」であるためです）。
ここ数年、死ぬほど話されてきました!defaultは、ネイティブのLess変数のオーバーライドと比較した場合、何も新しいものを追加できません。 限目。 （私たちは以前に何度もそこにいました：彼がLessで!defaultのユースケースを見つけたと思うなら、それはLess変数のセマンティクスの彼の誤解に他なりません）。

必要なのは、次の場合にのみ使用されるローカルファイルの値です。
a） path/to/file.lessがロードされていない、または
b） @ font_size__h1 path/to/file.lessに設定されていない

次に、それは単に反対です：

@font-size-h1: foo;
<strong i="27">@import</strong> "path/to/file.less"; 

多田！

...私が言ったように、それは私が着陸した場所です。

私が書いた記事を提案し、@seven-phases-maxがそれにリンクしているのを見ました。 😄私たちを信頼してください、あなたが求めているものはすでに存在しています！ ただし、Lessの変数評価を理解して、それがどのように/なぜ存在するのかを理解する必要があります。

データグリッドであるコンポーネントがあります。 このコンポーネントには、コンポーネントパッケージで定義されたデフォルトのスタイルが必要です。 ただし、外部からの特定の変数がすでに定義されている場合は、その変数を優先する必要があります。

app.less
/grid/grid.less

グリッドはコンポーネントであるため、ここに何かを追加すること、またはgrid.lessファイルの後にコードを追加することを忘れてください。
この問題をどれだけカバーしているかわかりません。 Scssは、正当な理由でこの機能を提供しています。

@ geri777

ただし、外部からの特定の変数がすでに定義されている場合は、その変数を優先する必要があります。

CSSのように評価が少ない。

.css {  
  --color: blue;
  color: var(--color);  // --color will be red
  --color: red;
  border-color: var(--color);  // --color will still be red, red is the scope's final value
}

.less {  
  <strong i="10">@color</strong>: blue;
  color: @color;  // <strong i="11">@color</strong> will be red
  <strong i="12">@color</strong>: red;
  border-color: @color;  // <strong i="13">@color</strong> will still be red, red is the scope's final value
}
````

Scss, instead, doesn't mimic CSS evaluation and instead evaluates more like, say, PHP.

```scss
.scss {  
  $color: blue;
  color: $color;  // $color will be blue
  $color: red;
  border-color: $color;  // $color will be red
}

したがって、Sass / SCSSでは、ルート変数の値をオーバーライドするために、次の2つのことを実行する必要があります。

1. すべての変数宣言に!defaultのタグを付ける必要があります
2. これらのデフォルト宣言の前にグローバル変数を挿入する必要があります。

のように：

// main.scss
<strong i="22">@import</strong> "overrides.scss";
<strong i="23">@import</strong> "library.scss";

// overrides.scss
$color: red;

// library.scss
$color: blue !default;

.scss {
  color: $color;
}

Lessでは、テーマ設定がはるかに簡単です。 あなたは（通常）あなたのライブラリについて何も変更する必要はありません、あなたはただあなたのオーバーライドを後に置く必要があります。 あなたはただ一つのことをする必要があります。

// main.less
<strong i="27">@import</strong> "library.less";
<strong i="28">@import</strong> "overrides.less";

// overrides.less
<strong i="29">@color</strong>: red;

// library.less
<strong i="30">@color</strong>: blue;

.less {
  color: @color;
}

したがって、Lessは常に最終値を受け入れるため、 !defaultは必要ありません。

CSSのカスケードのように評価を少なくすることを考えてください。 それはうまくいきます。 最終宣言が勝ちます。