Less.js: ガードが未定義の変数を操作できるようにする

+1
これは、ライブラリの基本色を設定するためにも使用できます。
次の場合を想像してみてください。
ウェブサイトのメインメニューなど、特定のアプリのファイルが少なくなっています。
このlessファイルをメインのlessファイルにインポートします。メインのlessファイルでは、ベースカラーが変数として定義されています。
これで、メインメニューのlessファイルでこれらの基本色を使用する場合、それらはメインファイルに依存します。
変数の存在を確認できれば、モジュール定義の色にフォールバックできます。
メニューレスファイルを想像する方法の例を次に示します。

@menu-base-color: white;
@menu-base-color: @base-color when (@base-color);
...or...
@menu-base-color: @base-color when isset(@base-color);

+1、すでにistextがあり、 isnumberにはisdefinedがあり、 isundefinedは少ないテーマで大いに役立ちます。

つまり、$ valueを使用するか、 isdefined $の場合は$ userValue $を使用します

LESSを使用してセマンティックUIのテーマ規則を設定しようとすると、この問題が頻繁に発生します。

これに+ 1-本当に素晴らしいでしょう。

私もこれに+1

is-defined関数を追加するのは大したことではありません（v2がリリースされるとすぐに最初のプラグインの1つに表示されると思います）。 正直なところ、悲しいことに、この機能が必要な人は、上記の両方のユースケースが（多くの場合、よりコンパクトなコードでも）そのような機能がなくても解決できるという事実を見逃しています。

@InitArtのユースケース：

// library.less
<strong i="9">@variable</strong>: false;

a when (@variable) {
    color: red;
}

// ......................................
// user.less
<strong i="10">@import</strong> "library.less"
<strong i="11">@variable</strong>: true;

@ nemesis13のユースケース：

// library.less
@base-color: green;
@menu-base-color: @base-color;

.menu {
    background-color: @menu-base-color;
}

// ......................................
// user.less
<strong i="16">@import</strong> "library.less"
@base-color: white;
// or:
@menu-base-color: black;
// or whatever...

つまり、要約すると、変数が定義されているかどうかをテストする代わりに、変数値は自由にオーバーライドできるため、その変数のデフォルト値を提供するだけです。

マックスの例が彼らのために実行できない理由を誰かが答えることができますか？ 私しかできない
変数が上で定義されているかどうかわからないためだと思いますか
インポートの下？ それとも何か他のものですか？
ユースケースがないものについては検討しません。
これを行うことの欠点は、変数をタイプミスした人には表示されないことです。
エラー。 警告を出してこれを回避することもできますが、
警告を望まない目的..これに関する私の唯一の問題です
提案。

これは、結果のCSSのサイズを小さくするためにテーマを定義するときに特に役立ちます。 一般的にテーマを作成するときは、多くのプロパティを設定できるようにしたいと思います。 ただし、ユーザーは、残りのプロパティを未設定のままにして、それらの一部のみを設定したい場合があります。 もちろん、それらをデフォルト値に設定することは一般的には機能しますが、これは最終的なCSSを肥大化します。

次の基本テーマ（テンプレート）を検討してください。

.my-class {
    color: @text-color;
    background-color: @background-color;
    border-color: @border-color;
}

テーマのユーザーは、残りのプロパティを設定せずに、テキストの色だけを設定したい場合があります。 もちろん、値を「初期」、「透明」、「継承」などに設定することは可能ですが、これにより最終的なCSSのサイズが大きくなります。 テーマにはそのようなプロパティが何百もある傾向があるため、このサイズは大幅に大きくなる可能性があります。

@JechoJekov

この機能リクエストの要点を見逃していると思います。ユースケースでは、これらのプロパティすべてに注意を払う必要があることに注意してください（したがって、上記の2つの投稿が引き続き適用される理由）。 したがって、あなたのユースケースが＃1400に新しいものを追加することはないと思います（基本的に、「すべての値が未定義の変数で設定されている場合はプロパティをスキップする」などの別の機能を提案しているように見えますが、それは別のものですビッグストーリー）。

@ seven-phases-max

おそらく、変数を「未定義」または「未設定」の値に設定できるとよいでしょう。 プロパティをそのような値に設定すると、そのプロパティは最終的なCSSでレンダリングされません。 これにより、構文が簡略化され、変数が宣言されていることを検証できます。

@JechoJekov

おそらく、変数を「未定義」または「未設定」の値に設定できるとよいでしょう。

私が述べたように、これは独自のチケットを必要とする別の機能です（独自の議論があります）。

ロードマップのほんの一部の説明：これは「ReadyForImplementation」とマークされていますが、このスレッドにはコンセンサスがないようで、@ seven-phases-maxが適切な代替案を提案したようです。 @lukeapage @ Seven-phases-max、実装の準備を削除する必要がありますか？

@ matthew-deanわかりません。 ここで「ReadyForImplementation」はまだ有効であると思います。つまり、「この機能は実際には必要ではないようですが、誰かがそのようなものを実装するPRを思いついた場合、抵抗はありません」または一種の:)

どのようだ？ （検討中の）

私にとって、「実装の準備ができている」とは、対処または実装する必要があるという一般的な（ただし必ずしも全会一致ではない）コンセンサスがあることを意味します。 「検討中」はあなたの定義に合っていると思います。

スコープを使用しているときにまだこの問題が発生しています

<strong i="6">@foo</strong>: 'bar';
& { 
  // not sure if <strong i="7">@foo</strong> is defined
}

isDefinedを使用する能力が欲しい

is-definedのようなものは（構文糖衣として）理にかなっていますが、実際には必要ありません。 _常に_定義@foo （必要なデフォルト値を使用）、結局のところ、スタイル内で変数を使用している場合は、それを定義する必要があると_予測_できます。例：

// in a far far away galaxy of your library default variables:
<strong i="8">@foo</strong>: undefined;

// the code where you need it
& when not(<strong i="9">@foo</strong> = undefined) { 
    // <strong i="10">@foo</strong> is defined by user    
}

// some user code
<strong i="11">@foo</strong>: bar;

私はすでに上記の例でこれを書いたと思いますが（私はこの機能の欠如が何のショーストッパーにもなり得ないという事実を確実に表明しようとしています。 1つ、共有してください）。

ブラウザでテーマのプレビューを設定しようとしています。

これは、 less.jsを使用し、デフォルトの@theme変数を実行時設定で上書きする必要があることを意味します。

アラ

window.less.modifyVars({
  theme: 'someOtherValue'
})

私のLESSでは、以下を含むグローバルtheme.lessファイルをインポートしています

<strong i="14">@theme</strong>: undefined;

.setTheme {
  <strong i="15">@theme</strong> : 'default';
}
.setTheme;

私も試しました

<strong i="19">@theme</strong>: 'default';

前者の場合、出力される値はundefinedであり、後者の場合、 modifyVarsに何が設定されているかに関係なく、常にdefault $になります。

例については、ここをクリックしてテーマのドロップダウンをクリックしてください。

現在の回避策（ライブサイトにあります）は、変数のインポートパスを手動で取得し、正規表現を使用して解析してから、 modifyVarsを使用してすべての変数をインポートすることです。これは、かなり厄介だと推測できます。

@ Seven-phases-max @importが問題を引き起こす非常に特殊なテストケースに絞り込みました。

どちらの場合も、次のことを前提としています。

Javascript

window.less.modifyVars({
  theme: 'changedValue'
});

theme.lessの最初のケースでは、 outerがchangedValueに正しく設定されています

component.less

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

theme.less

<strong i="22">@theme</strong>: 'default';
.outer {
  value: @theme; // value is set to changedValue
}

この失敗した場合、theme.lessでは@themeはchangedValue defaultに設定されます

component.less

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

theme.less

<strong i="37">@theme</strong>: 'default';
<strong i="38">@import</strong> "@{theme}"; // theme is set to default not changedValue

「varinmixin」の場合、スニペットは次のようになります。

// defaults:
.setTheme {
   <strong i="6">@theme</strong>: undefined;
}

// custom:
.setTheme {
  <strong i="7">@theme</strong>: 'default';
}
.setTheme;

ただし、 modifyVarsの場合は、試したスニペットに対して常に'someOtherValue' $になるはずです（ modifyVarsは、コンパイルされた最後にプレーンな<strong i="14">@theme</strong>: 'someOtherValue';行を追加するだけで機能するためです）ソースコード）。 したがって、 modifyVarsが機能しない場合、問題は他の場所で発生している可能性があります。
buttonのページコードを見ましたが、複雑すぎて何が間違っているのかをすぐに言うことはできません。 一見すると、Lessコードがどのように再コンパイルされ、結果のCSSがmodifyVarsの後に再適用されるかがわかりません（または理解できないかもしれません）（単純なスニペットでは、$に続くmodifyVars less.refreshStylesを介して行われます） modifyVars ）。

ところで、念のため、 is-defaultを次のようなものとして使用する予定はありませんか。

.setTheme when not(is-defined(@theme)) {
  <strong i="26">@theme</strong>: 'default';
}
.setTheme;

？ もしそうなら、問題はそのようなコードが遅延評価の原則に直接違反することです（変数が定義されていない場合、 is-definedはfalseを返すはずですが、そのスコープですぐに定義されるので、 , is-definedもtrue->解決できない再帰を返す（Lessで条件付き命令のような再定義を安全に許可できない理由の詳細については、＃2072を参照してください）。
つまり、実際には期待どおりに機能する可能性があります（ is-definedが明示的に検出され、そのような再帰を回避するようにコーディングされていない限り）が、特定されていない/未定義の動作の一種としてのみ、通常の変数の可視性ルールとの一貫性がないため、より多くの混乱。

@jlukic

<strong i="8">@theme</strong>: 'default';
<strong i="9">@import</strong> "@{theme}"; // theme is set to default not changedValue

はい、これも私の疑いの1つでした（残念ながら、現在これをテストすることはできません。また、これがどのように発生するかを推測することもできませんが、インポートでの変数の使用は真の黒魔術であるため、可能です。専用の黒魔術を作成します。これが問題である場合はレポートを発行してください）。

私はそれがその素晴らしい黒魔術と​​関係があるとかなり確信しています。

私はデバッグするために非常に単純な少ないファイルで作業してきましたが、まだテストケースリポジトリを作成する機会がありませんでした。

私のテストでは、失敗はインポートで{@variable}値を使用することに固有ですが、cssプロパティでは使用されません。

より少ないテーマで本当に楽しんで、これらの問題を乗り越えたいと思います。 これは、先週Meteor DevShopで披露したLESSの楽しいテーマの例です（右上のペイントバケットアイコンをクリックしてください）

@jlukic私はそれをテストし、 modifyVarsはlesscとless.jsの両方で期待どおりにインポートの変数に対して機能します（ codepenデモを参照してください。要旨の恐ろしいURLからインポートしますが、それはあなたのページが実行することになっているものと同じだと思います...したがって、実際には問題は他の場所にあるようです）。

テストケースの作成に時間を割いていただきありがとうございます。 これはかなり明確です。 何が起こっているのかわかりません。調査する必要があります

このリクエストに何か動きはありましたか？ しばらくの間、未定義の変数チェックが心配でした。 現時点では、理想からはほど遠い回避策があります...

p {
  & when not (@body-text-color = null) {
    color: @body-text-color;
  }
}

ただし、これが機能するには、変数が存在し、デフォルトnullとして定義されている必要があります。 代わりに、変数がそもそも存在するかどうかを確認できれば、これははるかに効果的で柔軟性があります。

+1

つまり、要約すると、プラグイン内でのis-defined(name) （および/またはget-value-of(var-name, fallback-value-if-not-defined) ）関数の実装には、15行未満のコードが必要です。 ですから、あなたが十分に勇気があるなら、それをしてください。

これに+1。 プラグインとしてこれに進展はありますか？ つまり、@ seven-phases-maxは、ほとんどの寄稿者よりもコードをよく知っていると思います。 約15行のコードが必要な場合、なぜまだ実行されていないのですか？

約15行のコードが必要な場合、なぜまだ実行されていないのですか？

誰も本当に興味がないので？ 他の誰かがあなたのためにこれを行うとき、すべての機能はクールで「非常に便利」です...しかし、それがあなた自身の時間についてであるとき、それは魔法のようにそれほど重要ではなくなります;）

あなたはほとんどの貢献者よりもコードをよく知っています

これは、申し訳ありませんが、他の誰かの興味の後に自分の興味のあるものを置く必要があるという意味ではありません（特に、それが私が個人的に誤用/悪いコードスタイルとして扱うことを奨励するものである場合）。

空に聞こえないように、 @ ashendenのユースケースの場合：これは、ルールセットを「不明」（何らかの理由で通常のCSSオーバーライドが適用できない場合を想定）によって欠陥なしにカスタマイズできるようにする適切な方法です。 「CSS値をすべて変数にブラインド移動し、使用しないものを使用する」というアイデア（これは、のストーリーであるため、実際に壊れている理由については詳しく説明しません。長いブログ投稿）。

通常「フック」と呼ばれるコンセプトがあるので、次の「お祭りを思いとどまらせることはできません」：

// .............................................
// base code:

p {
    & when not (is-defined(@body-text-color)) {
        color: @body-text-color;
    }
    & when not (is-defined(@body-text-color)) {
        background-color: @body-back-color;
    }
}

span {
    & when not (is-defined(@body-text-color)) {
        color: @body-text-color;
    }
    & when not (is-defined(@body-text-color)) {
        background-color: @body-back-color;
    }
}

// .............................................
// customization:

@body-back-color: blue; // how about gradient?

次のように置き換える必要があります：

// .............................................
// base code:

p {
    .body-text();
    .body-back();
    // ^ it's actually better to group all this into a singe entity, e.g. .p()
    // so that as you don't know WHAT or HOW to be customized
    // you don't pre-enforce any limitations and/or hardcoded approach
    // for something YOU do not even write
}

span {
    .body-text();
    .body-back();
}

.body-text() {}
.body-back() {}

// .............................................
// customization:

.body-back() {background-color: blue}

行を数え、可能性を数え、制限を数えます。
つまり、実際には、CSSプロパティを使用しない場合は、使用する人のためにそのままにしておいてください。

皆さん、ここで私はこれに遭遇しました。この例を見て、それが有効なケースであり、is-undefinedなしでは修正できないかどうかを教えてください。

次のようなモジュールのようなライブラリにテーマをロードしたい：

私のコアアプリでは、変数@theme ： 'yellow'を定義してから、ライブラリをあまりインポートしません。

そして、この場合、ライブラリが少なく見える可能性があるのは次のとおりです。

@ import'themes / @ {theme} ';

体 {
背景：@primaryColor;
}

このようにして、 @ primaryColor ：yellowと@primaryColor ：redでyellow.lessとdefault.lessを作成できます。

最終的に、primaryColorなどのセマンティック変数名を使用してライブラリを記述し、それらの変数が定義された一連のテーマを提供できます。 また、ライブラリユーザーは、アプリでテーマ名を定義し、ライブラリスタイルをインポートするだけです。

わかりました、気にしないでください、私はそれを手に入れたように見えます、私はこのようなインポートミックスインが必要です：

<strong i="6">@theme</strong>: 'default';

.imports(@theme) when (<strong i="7">@theme</strong> = 'yellow') {
    <strong i="8">@import</strong> "themes/yellow";
}
.imports(@theme) when (<strong i="9">@theme</strong> = 'default') {
    <strong i="10">@import</strong> "themes/default";
}
.imports(@theme);

@waterpleaコードを次のように簡略化できます。

<strong i="7">@theme</strong>: default;

.imports(yellow) {<strong i="8">@import</strong> "themes/yellow";}
.imports(default) {<strong i="9">@import</strong> "themes/default";}
.imports(@theme);

また、削除された冗長な引用符にも注意してください。

正直なところ、 <strong i="13">@theme</strong>: yellow; （+すべてのミックスインコード）が明示的な<strong i="15">@import</strong> "themes/yellow";行よりも優れているかどうかはわかりません。 つまり、まず第一に、あなたはオーバーライドに気づいていますか？ つまり、ライブラリユーザーがyellowのものを適用する必要がある場合は、デフォルトの<strong i="18">@import</strong> "themes/default";を非表示にする必要はありません-彼女は黄色のテーマをインポートするだけです（メインライブラリファイルの後のどこかにありますが、これも同じ1行）とvoilà-ライブラリは黄色のファイルで指定された変数値を使用します。

テーマを上書きしたり、プリセットテーマに切り替えたりするファイルをオプションでインポートすることになりました。 ライブラリを使用するプロジェクトでは、プロジェクトで別のテーマが必要な場合に、そのファイルのエイリアスをノードモジュールとして使用するようにwebpackを構成します。 私が以前に書いたものやあなたが書いたものは、Angular用のUIキットを構築しており、高度にモジュール化されているため、この場合は機能しません。 ボタンを1つだけインポートするか、コントロールを選択することができます。これは、すべてのスタイルのカプセル化で使用しているテーマを認識している必要があります。 ソリューションの設定は簡単なので、満足しています。

Angular用のUIキットを構築しており、高度にモジュール化されているため、この場合は、あなたが書いたものは機能しません。

_{私はこれを前に無限に見ました-これは最も悲しいLess（誤）理解の問題の1つです-人々は基本的なLessの遅延評価の原則を見逃し、自然なLessのオーバーライドを使用する代わりに、大量のファイル注入でライブラリを構築します-正反対の変数セマンティクス（PHP、Sassなど）を持つ言語の習慣に触発されたベースのカスタマイズパターン。 それはただの誰かが「みんな、あなたはそれを間違っている！」と絶えず叫んでいる以上の何かであるに違いありません。}

私はそれを正しく理解したいと思います、私は私がすべてを理解していると主張していません:)私の例であなたの提案を説明するように気をつけますか？ これが私たちが得たものです：

最小限の構造例を次に示します。

図書館：

• import.less
  <strong i="10">@import</strong> 'theme-default';
<strong i="13">@import</strong> 'mixins';
• mixins.less
  some mixins here like resetting default browser button styles
• theme-default.less
  <strong i="20">@primary</strong>: red;
<strong i="23">@secondary</strong>: blue;
• テーマ-secondary.less
  <strong i="27">@primary</strong>: green;
<strong i="30">@secondary</strong>: yellow;
• buttonComponent
  <strong i="34">@import</strong> 'import';
.button { color: @primary; }

プロジェクト1（デフォルトのテーマを使用する必要があります）：

• 成分
  <strong i="42">@import</strong> 'import';
body { background: @secondary; }

プロジェクト2（セカンダリテーマを使用する必要があります）：

• 成分
  <strong i="50">@import</strong> 'import';
body { background: @secondary; }

ライブラリはノードモジュールとして追加され、プロジェクト内では、ライブラリからボタンコンポーネントのみをインポートします。 これは、独自の少ないファイルを備えたそのボタンのAngularモジュールであるため、Project1またはProject2の残りの部分とは別にコンパイルされます。

私はこれについてしばらく考えていましたが、プロジェクト1またはプロジェクト2がコンポーネントとプロジェクト独自のコードの両方をコンパイルするときに使用するテーマファイルを設定できるように、より少ないファイルを整理する方法を思い付くことができませんでした。 プロジェクトのコード内からボタンコンポーネントのスタイルをオーバーライドする方法がわかりません。

代わりに、基本的に、import.lessを作成した方法は次のとおりです。
<strong i="58">@import</strong> 'theme-default';
<strong i="61">@import</strong> 'mixins';
<strong i="64">@import</strong> (optional) '~custom-theme';

また、Projects内で、Projectsコードとライブラリコンポーネントの両方のテーマ変数をオーバーライドする場合は、webpackを使用してこのファイルをモジュールとしてエイリアスします。 このファイルには、 @ primaryなどの明示的なオーバーライド、または単にセカンダリテーマへの切り替えが含まれている可能性があります。
<strong i="69">@import</strong> '~myLibrary/styles/theme-secondary';

だから私はオーバーライドについて知っています、問題は—ライブラリのユーザーは「メインライブラリファイルの後のどこか」とライブラリコンポーネントコードの間に入る方法がありません。 あなたの言うことは、スタイルのカプセル化がないフレームワークでは機能すると思いますが、Angularの場合は機能しないか、ソリューションの内容を誤解していました。

分かりました。 次に、実際には同じことを話します（別の言葉で）。 buttonComponent （またはその他のコンポーネント）が個別にコンパイルされるとすぐに、「プロジェクトカスタマイズマスター」はimport.lessファイルのままになり、私が提案したとおりに実行されます。 （ Project 1とProject 2は、 buttonComponentと同じレベルの別の「その他」（または「オールインワン」？）コンポーネントになりますが、かなり「プロジェクト」）。

つまり、このように私はあなたが私の好みに「それを正しくした」と言うでしょう。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

@stalePing 。

技術的には、この機能を実装するプラグインは2015年から利用可能です。 しかし、個人的にはテストしたことがないので、何か問題が発生した場合でも私を責めないでください（これは参考までに）。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

だから...私はこのスレッドをざっと読み返しましたが、これがほとんどの場合、スコープが少ないかどうかを誤解している人の場合であるかどうかを実際に判断することはできません。

varsが定義されているかどうかを確認する必要はあまりありません。 消費される場合は、変数を定義する必要があります。

<strong i="7">@import</strong> "library";  // contains @library-color: blue;

@library-color: red;

.box {
  color: @library-color;
}

値_changing_に基づいて条件付きでプロパティを設定する必要があることを理解していません。 プロパティが変数に設定されている場合は、変数の値を変更するだけです。

つまり、 library.lessに次のようなものがある場合：

@library-color: blue;
.box {
  color: @library-color;
}

出力を設定するために誰かが行う必要があるすべてのこと：

<strong i="16">@import</strong> "library";
@library-color: red;

これにより、次のように出力されます。

.box {
  color: red;
}

そのスレッドのOPと他の人はその振る舞いを理解していますか？

「doesvarexists」のユースケースはフラグを立てる良い方法だと思います。 つまり、概念的に単純な「偽り」はないと思います。 むしろ、 trueが唯一の「真実の」値であるのは珍しいことです。 言い換えれば、それは行動の問題ではなく、教育の問題だと思います。

これは通常、デフォルトの変数値を宣言する1行で修正されるため、この問題を解決することを検討する必要があると思います。 Less v3.5はより寛容な取引に移行していますが、ガード内の変数はより寛容に評価されているのでしょうか。

しかし、私の投票はノーです。 @the-variable: false;は、OPが追加する必要があるすべてのようです。

これに関連していると感じる特定の問題を解決する方法について質問がある場合は、自由に投稿してください。

了解しました。@ calvinjuarezに感謝します。

これが開いてからも起こったことはif()関数です。 だからあなたはcolor: if((@variable), green, red);をすることができます

@ matthew-deanこのヒントを書いてくれてありがとう。 3.0リリースノートにif（）が追加されているのを見ましたが、この問題とは関係がありませんでした。これは、私が独自のケースを持っていたためです（ただし、の縮小バージョンを作成する時間はありませんでした）。 繰り返しになりますが、非常に感謝しています。 よくやった、LESSチーム。

@kbav問題ありません！ そのヒントに加えて別のヒント： if()が最初に導入されたとき、それは基本的にwhenガード（$＃のwhen when (@variable)後の部分のように）を「埋め込んで」いたため、条件の周りにパレンを必要としました

color: if(<strong i="10">@variable</strong>, green, red);