Less.js: border-radiusが正しく解析されていません

作成日 2020年02月06日 · 3コメント · ソース: less/less.js

border-radiusに/が含まれている場合、それは分割だとは思わないように見えます...

再現するには：

.border-radius {
  border-radius: 34px 0 0 36px / 34px 0 0 36px;
  border-radius: 10px 100px / 120px;
}

生成：

.border-radius {
  border-radius: 34px 0 0 1.05882353px 0 0 36px;
  border-radius: 10px 0.83333333px;
}

...これは正しくありません。これが有効な構文であることがわかります。
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

ソース

heavyk

👍2

最も参考になるコメント

この問題は、私が作成したこのテストケースで確認できます。コンパイルされたCSSを表示して、LESSがどのようにレンダリングするかを確認します。

@heavykとこれに私のテストケースにも示され

書く代わりに...
border-radius: 10px 100px / 120px;

書きます
border-radius: 10px 100px ~"/" 120px;

LESSで、正しく解析する必要があります。 /文字だけを残し、分割が行われることを示す文字として解釈しないでください。

kbav 2020年02月18日

👍2

この問題は、私が作成したこのテストケースで確認できます。コンパイルされたCSSを表示して、LESSがどのようにレンダリングするかを確認します。

@heavykとこれに私のテストケースにも示され

書く代わりに...
border-radius: 10px 100px / 120px;

書きます
border-radius: 10px 100px ~"/" 120px;

LESSで、正しく解析する必要があります。 /文字だけを残し、分割が行われることを示す文字として解釈しないでください。

kbav 2020年02月18日

👍2

かっこいい、逃げる方法を知っていると助かります、ありがとう！

heavyk 2020年02月24日

これにはいくつかの回避策があるため、終了します。もう1つは、 http： //lesscss.org/usage/#less-options-mathのように数学モードを変更することです。

matthew-dean 2020年04月30日

👍1

このページは役に立ちましたか？

0 / 5 - 0 評価