Less.js: 混合単位の数学を処理する方法

作成日 2017年04月09日  ·  6コメント  ·  ソース: less/less.js

div {
    <strong i="5">@value</strong>: 1px;
    a: <strong i="6">@value</strong> * 1rem;       // 1px  - ok
    b: <strong i="7">@value</strong> * 1px * 1rem; // 1px  - ok
    d: <strong i="8">@value</strong> / 1px;        // 1px  - ok
    c: <strong i="9">@value</strong> / 1px * 1rem; // 1rem - unexpected
    e: <strong i="10">@value</strong> / 1px + 0rem; // 1rem - unexpected
}

cおよびd結果は、結果が式の左端の単位(つまり、すべての式)を持つ必要があることを示すhttp://lesscss.org/features/#features-overview-feature-operationsと矛盾します。上記は1pxを生成するはずです)。 テストはa / b / c式のみをカバーし、誤って期待される結果を生成します。
#2418および#2472に関連します。

bug needs decision

最も参考になるコメント

正直なところ、私はLessでユニットをミックスできるのが好きではありませんでした。 数学的な観点からは意味がありません。ご指摘のとおり、すべて評価順序に基づいています。これも意味がありません。

しかし、 strictUnitsコードを見たとき、それも私には意味がありませんでした。 それはまた、私が思っていたようなことをしていないようです。

だから、ええ、それは奇妙ですが、私はそれが修正されるのを見たくありません。 混合単位の数学がなくなるのを見る傾向があります。 しかし、それは私だけです。 1px * 1pxの結果のように、 1px^2はずです(役に立たないが本当です)。 そして、の結果1px / 1pxなければなりません1 。 Sassは、ある種の数学については非常に複雑ですが、基本的な数学の原則を使用して、混合単位の単位の切り替えなどを行います。 例えば。

<strong i="13">@value</strong> / 1px * 1rem
ここでの計算は10px / 1pxです。 これにより、 1が生成されます(Lessではなく、原則として、Sassで生成されます)。 1 * 1rem = 1rem 。 この機能の起源についてはAlexisに違和感はありませんが、式の最初のユニットを選択することはちょっと奇妙で、評価するのが難しく、これらのバグのあるエッジケースにつながる可能性があります。

ちょうど私の0.02ドル。

全てのコメント6件

正直なところ、私はLessでユニットをミックスできるのが好きではありませんでした。 数学的な観点からは意味がありません。ご指摘のとおり、すべて評価順序に基づいています。これも意味がありません。

しかし、 strictUnitsコードを見たとき、それも私には意味がありませんでした。 それはまた、私が思っていたようなことをしていないようです。

だから、ええ、それは奇妙ですが、私はそれが修正されるのを見たくありません。 混合単位の数学がなくなるのを見る傾向があります。 しかし、それは私だけです。 1px * 1pxの結果のように、 1px^2はずです(役に立たないが本当です)。 そして、の結果1px / 1pxなければなりません1 。 Sassは、ある種の数学については非常に複雑ですが、基本的な数学の原則を使用して、混合単位の単位の切り替えなどを行います。 例えば。

<strong i="13">@value</strong> / 1px * 1rem
ここでの計算は10px / 1pxです。 これにより、 1が生成されます(Lessではなく、原則として、Sassで生成されます)。 1 * 1rem = 1rem 。 この機能の起源についてはAlexisに違和感はありませんが、式の最初のユニットを選択することはちょっと奇妙で、評価するのが難しく、これらのバグのあるエッジケースにつながる可能性があります。

ちょうど私の0.02ドル。

数学の変更と同様に、混合単位が変更されたため、2つの間に3番目のオプションがあります。

  1. strictUnits: false -数学と強制ユニットを実行しようとします
  2. strictUnits: ? -例: 1px / 1px // output 1100vh - 10px // output 100vh - 10pxつまり、単位が混在している場合は、式をそのままにして出力します-varsに割り当てられ、calc()で使用される部分式に役立ちます-将来のデフォルト?
  3. strictUnits: true -エラーをスローします(これがどのように役立つかわかりません)。

問題は、単位/算術処理に関する個人的な意見ではありません。 それは、コンパイラが独自のドキュメントに従わないことについてです。 (残りについては、たとえばhttps://github.com/less/less.js/issues/1366#issuecomment-342361948を参照してください)。

問題は、単位/算術処理に関する個人的な意見ではありません。 コンパイラが独自のドキュメントに従わないことについてです

ええ、わかりました。 しかし、最終的にはそれを「修正」する方法についてですよね? ですから、これを修正する価値はないと思いますが、代わりに、より直感的な動作をする必要があると、回りくどい方法で言っています。 しかし、ええ、それはちょうど、私の意見のように、男です。

@ Seven-phases-max注:ユニットの操作メソッドのほとんどを書き直しましたが、実際には、最終的なユニットを決定するための奇妙なアクロバットがいくつかありました。 ユニットを強制することが渡されたオプションである場合、左側のユニットが勝つ場合、私はそれをはるかに簡単にすることができました。

(厳密なユニットの改善の可能性について異なる意見があるスレッドがいくつかありましたが、それはトラッカー全体に広がっていたので(または少なくとも専用のスレッドをすぐに見つけることができません)私は単に:)の重要な部分を鳴らしていると思います
私の個人的な意見

strictUnits:? -例:1px / 1px //出力1、100vh-10px //出力100vh-10px

のようなものです:それだけの価値はありません(結果/努力の比率のため)。 言い換えれば、実際に改善することは何もありません(上記のような明らかなバグを修正することを除いて)。

真に汎用的であるためには(これらとその最小限の値/ opsパターン/例をハーコーディングするのとは対照的に)、すべての通常の算術等価を適切に処理し、 px²ような「虚数」単位を導入する必要があることに注意してください。似ている。 たとえば、 a: 1px; b: 2px; c: 4px;の場合、 a*b/c期待される結果(明らかに(a*b)/c = a*(b/c)を受け入れる)は.5pxつまり、 a*bの結果は次のようになります。 2px² (少なくとも内部的に)。

他にも実装上の懸念があります(明らかに、 1/1hz = 1sなども数えるのは奇妙に見えますが、正式には...)セントで数える: CSS Unitsは大きすぎるクマだと言いました理由なしでそれを突く(「 1px/1px = 1ようなものが直感的に見えるという理由

strictUnits:true-エラーをスローします(これがどのように役立つかわかりません)。

基本的に、単位の伝播や混合単位のことを好まない場合は、そのような算術を許可しないより厳密なコーディングスタイルを導入する可能性があります(したがって、現在のstrictUnits: trueは基本的にこのコーディングスタイルを強制するオプションです)。

このページは役に立ちましたか?
0 / 5 - 0 評価