Less.js: カスタム関数の作成

おそらく、それをミックスインと区別し、CSS構文に近づけるために、次のようになります。

@darkfadein(<strong i="6">@color</strong>, @value): fadein(darken(<strong i="7">@color</strong>, @value));

パラメータに依存する変数のようなものです（あなたが考えるなら、それは一種の関数です=）

@souldreamerの構文に+1 。

しかし、 @ souldreamerの構文では、いくつかを書くことはできません。
値を変数に変換し、それらを再度使用します。

この構文を使用できます：

  @darkfadein(<strong i="9">@color</strong>, @value) {
     <strong i="10">@foo</strong>: darken(<strong i="11">@color</strong>, @value);
     return: fadein(@foo);
  }

それ以降のバージョンでは、次のようなことが可能になる可能性があります。

  @darkfadein(<strong i="15">@color</strong>, @value) {
     <strong i="16">@foo</strong>: darken(<strong i="17">@color</strong>, @value);
     for(<strong i="18">@i</strong> = 0; <strong i="19">@i</strong> < 5; @i++): {
       <strong i="20">@foo</strong>: darken(<strong i="21">@foo</strong>, @i);
     };
     return: fadein(@foo);
  }

同様に、ある種の関数を使用して値を返す必要があります。 考えられる解決策は2つあると思います。 1つの解決策は、変数構文を上記の@Deltachaosとして拡張することです。これは、基本的に次のとおりです。

@grid-width(<strong i="7">@columns</strong>, @column-width) {
    <strong i="8">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: @grid-width(6,60);
}

2番目のアプローチは、ミックスインを使用することです。 コンパイラはとにかくミックスインをJavaScript関数として扱うので、_ミックスインにreturn機能を追加する_ことはおそらく簡単な救済策でしょう。 これがどのように見えるかです：

.grid-width(<strong i="13">@columns</strong>, @column-width) {
    <strong i="14">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

SASSの「機能ディレクティブ」も同様の結果をもたらしますが、このミックスインソリューションの方がはるかに洗練されていると思います。

問題508と609もこれに関連しています。

@tylertateの2番目の構文が

ミックスインでこのようなことが可能だと思いますか？

.grid-width(<strong i="8">@columns</strong>, @column-width) {
    <strong i="9">@computedWidth</strong> = @columns*@column-width;
    for (var i = 0; i <= 36; i++) {
      <strong i="10">@computedWidth</strong> = darken(<strong i="11">@computedWidth</strong>, i);
    }
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

むしろ、定義されたLESSプラグイン構文のようなものを見て、プログラミングのようなロジックをJavaScriptLESSプラグインに移動したいと思います。 これらの提案は、現在のLESS構文および設計と矛盾しています。

同意する..方法を知っていれば関数を追加するのは比較的簡単なので、そのマークされたドキュメントにはバグがあります。

それで、解決策は何でしたか？

それを文書化する必要があります。 https://github.com/cloudhead/lesscss.org/issues/54を参照して

less.jsからのリンクされた問題は、ブラウザーでlessに関数を追加する方法を示しています

less = { functions: { rgbstr: function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);}}};

現時点では、関数をノードバージョンにプラグインする方法はありませんが、あるはずです。

おかげで、私はJavaScriptをLESSの構文から取り除くための応答と立場に感謝します。

ただし、ミックスインの戻り値を特定のプロパティに関連付けることを強制されないことは、そのような明確なユースケースのように思われます。 グリッドを使用する人は誰でも、 @ Deltachaosがやろうとしていたことをやりたいと思うでしょう。 プラグインを作成するレベルに落ちることなくこれを達成できるのは素晴らしいことです。

それはトリッキーなことです-ループが必要な場合、またはプラグイン内に存在する必要がある場合。

ただし、特定の値で3つ少ない関数を呼び出す場合は、構文をDRYにするために、その内部をより少なく抽出できることが理にかなっていることに同意します。プラグインを作成して次の事実を抽出する必要はありません。 1つの場所に5％暗くしたい。

再開しましたが、どこかで重複している可能性があります。

現時点では、ミックスインスコープの変数はすべて外部スコープにコピーされます。これは、変数を返すための一種の方法です。しかし、それは恐ろしい問題を引き起こしているので、削除したいと思います。

＃538の複製

「ミックスインスコープの変数はすべて外部スコープにコピーされます」

うーん、本当に？ はい、その動作を削除しましょう。 むしろ、変数にエクスポート用にマークを付けるか、自動リーク以外の何かをマークしたいと思います。 それは私にとって予想される振る舞いではありません。 変数はブロックスコープである必要があります。

うん、それはバックドアのバグを介して機能をサポートするようなものです

私はハックを見つけました：グローバルjs関数を宣言すると、後でそれを使用できます！

<strong i="6">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="7">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevainはちょうど今同じハックを見つけました:)

@fabienevainうまくいきました、ありがとう〜：+1：

process.mainModuleにアクセスすることで、同じeval jailから実際の関数を作成できることがわかりました...唯一の問題は、 process.mainModule.childrenを繰り返し処理し、何らかの理由でその順序が変更された場合にless.jsと一致する必要があることです。将来。 3番目のモジュールは、盲目的に信頼することを少なくすることを繰り返すつもりはありません。

残念ながら、 requireにアクセスすることはできませんが、 fsなど、すでに必要とされているものにはアクセスできます。これで十分です。

<strong i="10">@anything</strong>: `(function() {
    // console.log(process.mainModule.children[0].exports); // node fs is here
    // console.log(process.mainModule.children[2].children) // children of less, more node modules!
    var less = process.mainModule.children[2].exports;

    less.functions.functionRegistry.add("firstfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("00ff00");
    });

    less.functions.functionRegistry.add("secondfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("ff0000");
    });
})()`;


test {
    background: firstfunc(white);
    color: secondfunc(black);
}

実際の機能を持つことの良いところは、このcontext変数です。これには、処理中のファイルなどのジューシーな詳細が含まれているため、設定などを使用して独自のsvgデータURIインポートを作成できます。

編集JSを締め出そうとすると、なぜバックティックが導入されるのだろうか。 私は自分のLESSをできるだけコピー＆ペーストできるのが好きなので、プラグインは私には適していません。

私は自分のLESSをできるだけコピー＆ペーストできるのが好きなので、プラグインは私には適していません。

したがって、インラインバックティックハックでnode.jsベースのless.jsコンパイラが必要な場合でも、コードは「コピー＆ペースト可能」であると想定しますが、同時に、プラグインを使用するとうまくいかないと感じますか？ ドー！

@ seven-phases-max私のツールはかなりめちゃくちゃです。 lesscコマンドライン引数を制御できれば、おそらくプラグインを使用するでしょう。 （または、すべてを詰め込むマスタープラグインが1つあります）しかし、いいえ、環境を台無しにしました。Eclipseワークスペースに最大100のWPテーマがあり、すべてのビルドコマンドなどがそこに詰まっているために取り除くことができません。 。

@Cianticまず第一に、カスタム関数プラグインを使用するために特定のコマンドラインオプションは必要ありません-必要に応じて（＃2479）。 セカンダリ私は、深くねじ込まれた環境でコンパイラオプションを制御することを禁じているものは何でも疑っています（結局のところ、 lessc 「実行可能」は実際のノードスクリプトにリダイレクトするOSコンソールスクリプトです-したがって、何らかの方法でそこに_何か_を簡単に挿入できます）。

いずれにせよ、私のコメントは「コピー＆ペースト可能vs.プラグイン」に関するものでした。 壊れたビルドツール/チェーンの単なる回避策であることが判明しました。

@ Seven-phases-maxインポートプラグインは、まさに私が必要とするツールに見えます！ グローバルレジストリではなくプロジェクト内で関数を定義したいのですが、こうすることでプロジェクト内の関数を編集でき、グローバル関数に変更を加えてもファイルが何十億も少なくなる心配はありません。

@Ciantic

グローバルレジストリではなくプロジェクト内で関数を定義したいのですが、こうすることでプロジェクト内の関数を編集でき、グローバル関数に変更を加えてもファイルが何十億も少なくなる心配はありません。

さらに詳しく読んでください。プルリクエストの最初のドラフトはグローバル登録の簡単なルートでしたが、ある程度の洞察を得て、後でスコープローカル登録を行うように改良しました。 例えば

.my-mixin() {
  <strong i="10">@plugin</strong> "my-func.js";
  <strong i="11">@value</strong> : my-func();
}

ミックスインスコープ外にmy-funcリークすることはありません。 もちろん、パスは@plugin宣言を含むファイルにも関連しているため、すべてがきちんとバンドルされており、サードパーティが使用できるように出荷できます。 100％_transparantly_。

それがこの機能の私の設計目標でした。 ^ _ ^

less.jsはカスタムカラーコンビネーションを追加するために必要です
コードのコミット中に問題が発生する
サポートしていますが、less.jsが必要です

私はハックを見つけました：グローバルjs関数を宣言すると、後でそれを使用できます！

<strong i="7">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="8">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain @fnで使用する関数を減らすにはどうすればよいですか？ hsvsaturation 、 unitなど。Thx。

@hiyangguo

インラインJS式、ピリオドは使用しないでください。
カスタム関数を適切な方法で構築および登録します。
ドキュメントを読んでください。 それはすべてそこにあります： http ：//lesscss.org/features/#plugin -atrules-feature

@rjgotten OK、ありがとうございます。