Less.js: 楕円形の境界線半径を作成できません

作成日 2010年11月18日  ·  28コメント  ·  ソース: less/less.js

改訂されたCSS3仕様では、次の構文で楕円形の境界線半径を作成できます。
-webkit-border-radius:40px / 10px;
-moz-border-radius:40px / 10px;
border-radius:40px / 10px;

しかし、lessはこれを解析し、40/10を計算するため、実際には5になります。
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

Lessが構文解析せずに、この構文を記述する方法があるはずです。

bug medium priority

最も参考になるコメント

申し訳ありませんが、それを修正する唯一の方法です。厳密な計算をオンにして、すべての計算が括弧である場合にのみ実行されるようにするか、

border-radius:0 0 100% 100% ~"/" 0 0 24px 24px;

全てのコメント28件

行の高さを宣言するときにfontプロパティで発生する同様の/関連する問題を追加したかった

.class {
    font: 13px/1.231 arial, helvetica, clean, sans-serif;
} 

変更されないままである必要がありますが、次のようになります。
.class {
font:10.560519902518276px arial、helvetica、clean、sans-serif;
}

dotlessにもこの問題があります(https://github.com/dotless/dotless/issues/16)。 両方をどのように進めるかについて合意に達するとよいでしょう。

今日、箱から出してすぐに機能する最も簡単な解決策は、文字列リテラルでラップすることです。

 font: ~"13px/1.231 arial, helvetica, clean, sans-serif";

あるいは

 font: ~"13px/1.231" arial, helvetica, clean, sans-serif;

lessの目標の1つは、通常のCSS構文と互換性があることであると理解しました。 回避策はこのルールを破ります。

私はあなたの欲求不満を理解しています。 Lessの算術プロパティと特定のCSSプロパティの間の簡単な解決策がわかりません。 たとえば、フォントが半分のサイズであることを実際に指定したい場合はどうなりますか。

 <strong i="6">@example</strong>: 24pt;
 .foo {
     font: normal @example/2 sans-serif;
 }

何かが妥協しなければなりません。 確かに、Lessを変更して、変換がラップされるようにすることができます。

 font: normal (@example/2) sans-serif;

ただし、フォントやborder-radiusの短縮宣言では一般的ではないケースを回避するために、すべてのケースで既存のLessスタイルシートが壊れて冗長になります。 既存のCSSが心配な場合は、別のオプションとして、既存のCSSをLessファイルにインポートできます。

 <strong i="13">@import</strong> "legacy.css";

この場合、インポートは成功しますが、CSSを変更または変換しません。

繰り返しになりますが、LessはCSSの厳密なスーパーセットではないというあなたの懸念を完全に理解していますが、明らかに優れたアイデアはありません。 この構文の問題に対する潜在的な解決策はありますか?

:+1:私からのこの問題についてですが、有効なCSSをエスケープする必要も、計算をトリガーするために括弧を必要としない、それを解決するためのエレガントな方法もわかりません。

@agatronic @cloudhead私はこれの修正に取り組んでいますが、これを先に進める前に、これをどのように処理する必要があるかについて、ご意見をお聞かせください。 SASSとStylusはどちらも、括弧内の除算のみを許可することでこれを処理します。他のすべての数学演算は、括弧の外で実行できます。 この方法により、W3Cによるスラッシュの将来の実装も機能しなくなり、RatioパーサーとShorthandパーサーが不要になります。 これが私が最初に問題を修正する傾向があった方法です。 これはあなたとあなたの両方にとって合理的な解決策ですか?

このバグは、スラッシュを使用してbackground-position(キーワードまたはディメンションの場合もあります)をbackground-sizeから分離するCSS3背景の省略形も壊すことに注意してください。 例えば:

.foo {
    background: url(image.png) center / 1px 100px;
}

また、 @ matthewdl 実行します

以前の提案は、「/」は除算され、「/」は比率であるというものでした。 @cloudheadから入力を取得するのは

@cloudheadはツイッター経由で、やや最小限に応答しました: パレンソリューションはまともなようです」

スペースソリューションの問題は、それでも完全に有効なCSSを壊してしまうことです。 残念ながら、既存の動作を壊すことなくこれに効果的に対処する唯一の方法は、プレーンな古いCSSが正しく解析に失敗することを許可し続けることです。

人々が猶予期間中に両方を楽しむことができるように、「一時的な」オプションはどうですか?

または

この修正をマージする直前にリリースを行い、メジャーバージョン番号を1.4に上げる必要があります(できれば、インクルードに変数を追加し、プロパティ名などを補間する必要があります。

これは間違いなく、既存の動作を壊してしまうため、よりメジャーなリリースの一部である必要がある修正になると思います。 一時的な解決策(スペースについて話している場合)が既存のコードを壊す可能性があることを考えると、それが合理的であるかどうかはわかりません。また、永続的な解決策へのクリーンな移行は提供されません。 これは、リリースでトリガーを引くことが最善のオプションであり、変更ログとドキュメントを通じて警告を受けることができる状況のようです。

私は既存の行動を維持するための旗を意味しました..しかし私はあなたに同意します。

コミット権はありますか? プルリクエストとして最適かもしれないので、
リリースと調整できます(私が知っている計画はありません)

個人的には、ピルを飲み込んで、非推奨の機能として括弧で囲まれていない数学演算のリストを開始する必要があると思います。 有効なCSSと競合するケースが多すぎます。 @ agatronic- @ cloudhead (または他の場所)とSkypeで話し合う価値があり、誰かのLESSライブラリを台無しにするのは嫌いですが、LESSが作成者の意図しないCSSをリッピングして壊してはなりません。 LESSパーサーには、数学演算が必要であることを示す明確なシグナルを提供する必要があります。括弧はそのための良い方法です。 括弧内:数学を行います。 括弧内ではありません:そのままにしておきます。

打撃を軽減するためのフェーズ1として、スラッシュ「/」がその値の有効なトークンである場所など、除算があいまいな場合にのみ、計算を停止できます。 したがって、境界半径の場合、LESSが不明な場合は、そのままにしておきます。 作成者が2つの数値を分割する必要があると確信している場合は、括弧を追加してデフォルトの動作をオーバーライドできます。

しかし、現在のところ、LESSは「有効なCSS =有効なLESS」として文書化されており、このバグではそうではありません。 有効なCSSを誤って書き直しているため、明らかにバグになっています。 問題は、それが明確に文書化された数学演算でもあるということです。 この2つは矛盾しており、2番目のケースは、CSSを保持したまま変更する必要があるケースであることは明らかです。

@ttfkam@ mlms13がほとんど同じことを言っているのが

@matthewdl +1

@agatronic :私にはコミット権がありませんが、コードレビューと潜在的なリリース調整のためにとにかくPRを通じてこれを行う必要があることに同意します。

@matthewdl :PRの目的で、括弧内の分割のみを許可する作業を開始しました。 LESSが有効なCSSを壊さないようにするための一時的な対策と考えてください。 特定のルールに限定されないため、スラッシュが検出され、親にラップされていない場合は、リテラルの区切り文字として出力されます。 それが終わったら、すべての操作を親内でのみ実行するように制限する方法をもう少し見ていきます。

さて、Skypeの@cloudheadとこれについて話し合いました。 彼は同意しているので、ここに計画があります:

1)次のリリースで、括弧の外の数学が非推奨になるようにドキュメントが更新されます。 ドキュメントは、括弧内にあるものとして数学演算を示します。 ただし、括弧以外の非除算演算はコンパイルする必要があります(そのリリースの場合)。

2)ステップ#1の後の後続のリリースでは、すべての数学演算に括弧が必要になります。 ドキュメントは「非推奨」から「サポートされていません」に変更されます(またはそのようなもの-通信方法を改善できます)。

いいね? これは、次の2つのリリースのマイルストーンの計画を開始する必要があることを意味しますが、それはここでのこのスレッドの範囲外です。

実際、明確にするために、ドキュメントを更新して、括弧内の数学は正常に機能するため、括弧外の数学は非推奨であると言うことができます。 これが本当にステップ0です。ドキュメントを更新して、a)数学をかっこで囲む必要があり、そうしないと将来壊れてしまう可能性があることを伝えます。b)すべての数学をかっこで囲みます。

私のために働く! :+1:

したがって、おそらく@dmcassはに対してプルリクエストを実行する必要があります
https://github.com/cloudhead/lesscss.org

次に、 @ cloudheadを面倒にして、そのプロジェクトへのコミットまたはコミット権を付与する必要がありますか?

そうそう。 はい、私はそれについて今日彼を悩ますことを忘れないようにします。

2012年8月21日午前5時19分、ルークペイジ[email protected]は次のように書いています。

したがって、おそらく@dmcasshttps ://github.com/dmcassはプルリクエストを実行する必要があります
に対して
https://github.com/cloudhead/lesscss.org

そして、 @ cloudheadhttps ://github.com/cloudheadを面倒にする必要があります
そのプロジェクトへのコミットまたはコミット権を私たちに与えますか?


このメールに直接返信するか、
Gi tHubhttps://github.com/cloudhead/less.js/issues/146#issuecomment-7899194

cloudhead / lesscss.org#29でドキュメントを更新するためのPRを開きました

1.4.0のマスターで修正

1.4.0ではそのようになります

less2css.orgでアルファ版をチェックしてください

次のCSSを使用している場合、このバグは1.4.1でも発生します。
border- radius:0 0 100%100%/ 0 0 24px 24px;

出力:
border-radius:0 0 100%Infinity%0 24px 24px;

(私はhttp://less2css.orgでそれを試しました)

@rubiousオプションメニューで厳密な計算をオンにしましたか? デフォルトではオフになっているため、古い動作になります。

動作しますが、LiveReloadを使用していて、このオプションがオンになっていないようです。

申し訳ありませんが、それを修正する唯一の方法です。厳密な計算をオンにして、すべての計算が括弧である場合にのみ実行されるようにするか、

border-radius:0 0 100% 100% ~"/" 0 0 24px 24px;
このページは役に立ちましたか?
0 / 5 - 0 評価