Less.js: CSS3 calc（）関数はLESSでは機能しません

作成日 2012年10月08日 · 51コメント · ソース: less/less.js

すでに報告されていることは知っていますが、情報が不十分なためバグはクローズされました。

私は次のCSSコードを持っています：

#id1 {
    position: fixed;
    left: 0; top: 0;
    width: 130px;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - 130px);
}

130pxをパラメーターとして使用してLESSに変換したかったのですが、calcはLESSによって解釈されます。

<strong i="11">@id1width</strong>: 130px
#id1 {
    position: fixed;
    left: 0; top: 0;
    width: @id1width;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - @id1width);
}

最後の1行をwidth: calc(-30%);変換しますが、これは明らかに望ましいものではありません。 width: ~"calc(100% - @id1width)";を使用してみましたが、 @id1widthが解釈されません。

LESSは、CSS3によって予約されているものを内部使用のために使用するべきではないと思います...

ソース

mgol

👍13 ❤2 😄2

最も参考になるコメント

それらはおそらく重複として閉じられました..私はcalcについてのものを見つけることができませんが..＃146＃122と＃915を参照してください

回避策： width: ~"calc(100% - @{id1width})"; -変数を中括弧で囲んでください。

この問題を解決するために、括弧内のものだけが評価されるシステムに移行しています。

lukeapage 2012年10月08日

👍51 🎉11 ❤6 😄5

全てのコメント51件

それらはおそらく重複として閉じられました..私はcalcについてのものを見つけることができませんが..＃146＃122と＃915を参照してください

回避策： width: ~"calc(100% - @{id1width})"; -変数を中括弧で囲んでください。

この問題を解決するために、括弧内のものだけが評価されるシステムに移行しています。

lukeapage 2012年10月08日

👍51 🎉11 ❤6 😄5

：+1：

shankarcabus 2012年12月18日

<strong i="5">@rows</strong>: 10;

<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;

.featured1
{
  top: ~'-webkit-calc(@{row1} + 20px)';
  right: 0;
  bottom: @row5;
  left: @col9;
}

LESSのこのビットは、 ' @ row1 'の値を10％に処理します。これは素晴らしいことです。しかし、それがLESSのエスケープされたセクション内にあり、LESS変数を保持するためにカーリーでラップされている場合、「％」なしで「10」を返します。

まだ失敗していない回避策を見つけました。エスケープされたコード内の「row1」変数の終了カーリーの後に別の「％」を配置すると、正しく機能します...

~'-webkit-calc(@{row1}% + 20px)';

しかし、それはすでに変数にあると思われる別のユニットタイプを追加するためのかなりのハックのようです。

jonjohnjohnson 2012年12月19日

@jonjohnjohnsonこれは頭の中で修正され、1.3.2になります

このバグの残りの部分は1.4.0で解決されます

lukeapage 2012年12月19日

これが同じ問題であるかどうかはわかりませんが、次の問題が発生しています。ここにはそれほど具体的なものはないことに注意してください。それ以外の場合は有効なCSSを変更しているのは1.3.3未満です。

これがCSSです

html, body {
    margin:0, padding:0, border:0;
    height: 100%;
}

#content {
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    background-color:gray;
}

#footer {
    background-color:black;
}

そしてこれがそれを含めるためのHTMLです

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>

「コンテンツ」は60％の高さに設定されているため、計算式を変更せずにブラウザに渡すのではなく、解析して誤って解決することが少なくなります。 Safari6.0.2およびFirefoxでテスト済み。

faceless2 2013年01月14日

1.4.0のマスターで修正

lukeapage 2013年02月02日

height: ~"calc(100% - 50px)";

まだ生成します：

height: calc(50%);

私のため。私が欲しい：

height: calc(100% - 50px);

OliverJAsh 2014年06月03日

さらに、厳密な計算がon設定されていても、 height: calc(50%);が生成されます。

OliverJAsh 2014年06月03日

@OliverJAsh 1.7.0未満では結果を再現できません（エスケープされた値と--strict-math:on両方が期待どおりに機能します）...使用するコンパイラ/環境/スクリプトの詳細を教えてください。（このような誤った結果につながる可能性のあるBootstrapビルドスクリプトの問題があった場合に備えて：https：//github.com/twbs/bootstrap/issues/13604、おそらくこれもあなたのケースですか？）

seven-phases-max 2014年06月03日

私は1.6.3でこの問題を抱えていました（何らかの理由で、1.7.xにアップグレードするとWinLESSがコンパイル時にバーフィングするので、今のところ1.6.xに固執しています）

私のクイックフィックスは、次のような方程式の一部をエスケープすることでした。

height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));

これは、 <strong i="10">@var</strong>: 50などの変数でも機能します。または、 calc(~"100% - 50px");ように計算全体をエスケープすることもできます

twiginteractive 2014年07月26日

👍5

@twiginteractive --strict-mathオプションoff （デフォルト設定）でエスケープを使用する必要がある場合、それは問題ではありませんが、予想される動作です。 --strict-math参照してください。

seven-phases-max 2014年07月26日

👍1

@ Seven-phases-maxうーん-ドキュメントによると、SMがオフ（デフォルト）の場合、これは正しく解析される必要があります（つまり、変更されません）。
height: calc(100% - 10px);

しかし、そうではありません。出力CSSはheight: calc(90%); 、これは望ましい結果ではありません。たぶんこれは1.7で修正されていますが、私が言っているように、WinLESSコンパイルを壊している原因を理解するまで、今はそのバージョンを使用できません。

（「正しく処理されます」と書かれているときにドキュメントを読み間違えない限り... LESSは100％の値を知ることができなかったので、「100％-10px」で数学的な計算を行うべきではありません）

twiginteractive 2014年07月26日

@twiginteractive

ドキュメントによると、SMがオフ（デフォルト）の場合、これは正しく解析されるはずです（つまり、変更されていません）

いや、言葉があるcurrentlyませんcorrectly （つまり、 "現在processed_ _beます"）。

seven-phases-max 2014年07月26日

@ Seven-phases-maxああ-私の悪い、今は理にかなっている。説明をありがとう。

twiginteractive 2014年07月27日

高さ：〜 "calc（100％-50px）"; 私のために働いた。

aamirshahzad 2014年09月05日

👍18 🎉5

~~これは、Less.jsがコードをいじり始めるところです。~~

height: _calc(50%);
height: calc(100% - 50%); /* browser-native */

stevenvachon 2014年09月05日

@stevenvachon

おそらく、v2.0には次のようにその関数にプレフィックスを付けるオプションがあります。

これはcalcにはまったく影響しません。組み込みのcalc関数はありません。Lessは、（Lessの）ルールに従って数式を評価しているだけです。それでおしまい。この「混乱」を望まない場合は、 --strict-math 。

seven-phases-max 2014年09月05日

この問題の解決策は厳密な数学です。そして多分私達はすべきです
calcを呼び出すときに、厳密な計算を強制しますか？

lukeapage 2014年09月05日

~~レスの後に神話を使用すると、問題が拡大します。~~

stevenvachon 2014年09月05日

どうして？神話は括弧を削除しますか？厳密な数学は適切なスーパーセットを少なくします
cssの。

lukeapage 2014年09月05日

そして多分私達はcalcの呼び出しの時に厳密な数学を強制するべきですか？

これについては＃1872で説明しましたが、「local strictmath ：on 」の回避策に反対する議論がいくつかあります。提案された解決策（まだ完全には決定されていません）は＃1880にあります。

seven-phases-max 2014年09月05日

@stevenvachon

strictMathを使用しても、Lessがそれを無視するように〜 "calc（...）"する必要があります。

例？すなわちAスニペットどこより少ないねじ内の式calcと--strict-math=on 。

seven-phases-max 2014年09月05日

v2プレフィックス機能はいつからですか？私たちはそれを決めました、そして私は忘れましたか？

lukeapage 2014年09月06日

v2プレフィックス機能はいつからですか？私たちはそれを決めました、そして私は忘れましたか？

いいえ。これはわずかに過大評価されていたと思いますhttps://github.com/less/less.js/issues/2102#issuecomment-50286985 。

seven-phases-max 2014年09月06日

はい、申し訳ありませんが、「へのオプション」ではなく、「オプションを提供するプラグインを作成する機能」です。 ~~calc() ~""を使用する場合と使用しない場合で、コードを再度テストする必要があります。~~ 私はしばらく前に間違えられて、その誤解で前進し続けたに違いありません。今すぐ変更する必要のある古いコードがいくつかあります。

stevenvachon 2014年09月06日

widthと組み合わせて使用すると、 calc何か奇妙なことが起こっていることに気づきました。簡単にするために、すべてをcodepenに入れました： http ：//codepen.io/anon/pen/OVpJvP

alenb 2015年06月02日

@alenb

では、何がおかしいのでしょうか。あなたのcodepenのコードは期待通りにコンパイルされています...

seven-phases-max 2015年06月02日

@ seven-phases-max

コンパイルされていますが、期待されたものではありません。 CSSコードをもう少し詳しく確認してください。

3列で完全に伸びるはずなのに、まだ右端に隙間があるので不思議です。最初の2列は33.33％マイナス20pxで、最後の列は33.33％である必要があります。最初の2列のパディング右は20pxですが、右端に明らかにギャップがあるため、これは反映されていません。

私は昨夜それでもっと遊んだし、マージン（パディングの代わりに右）がトリックを行い、問題を解決します。

alenb 2015年06月03日

@alenb

コンパイルされていますが、期待されたものではありません。 CSSコードをもう少し詳しく確認してください。

確かに、私はしました。したがって、何か別のことを期待する場合は、指定してください。

最初の2列には20pxのパディング権がありますが、これは反映されていません

paddingは幅にまったく影響しません（特定の[ box-sizing ]（https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizingを設定しない限り） )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get : （33％-20px）+（33％-20px）+ 33％= 99％-40px -> 40px`予想通りのギャップ。

いずれにせよ、これはCSSのみに関連しており、Lessがcalcコンパイルする方法とは何の関係もありません。 codepenコードの「viewcompiled」ボタンをクリックすると、 calcステートメントがLessによって指定したものに正確にコンパイルされていることがわかります。

seven-phases-max 2015年06月03日

@ seven-phases-max

私はcodepenがこれを明らかにするだろうと思っていたでしょうが、まったく問題はありません。

情報をありがとう！

alenb 2015年06月03日

今日でも、デフォルトのlessのインストール（npmを使用）では機能しません。

私は使用しなければなりませんでした：
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);

バグは「クローズ」とマークされているため、正常かどうかはわかりませんが、お知らせしたかっただけです。

rkyoku 2016年04月08日

👍1

@RenaudParis --strict-math

seven-phases-max 2016年04月08日

さて、私はそれを試してみます、ありがとう！しかし、それが
ディフォルト？意外なので、知らない時は
パラメータ。

とにかくありがとう！

Leven。 8avr。 20時48分、マックス・ミハイロフà2016 [email protected] A
écrit：

@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command -line-usage-strict-math
—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示してください
https://github.com/less/less.js/issues/974#issuecomment -207553212

rkyoku 2016年04月08日

しかし、それがデフォルトである方が良いのではないでしょうか？

これをデフォルトにすると、既存のLessコードベースの多くが壊れます。かつて（〜 v1.4.0 ）実際にデフォルトにする試みがありましたが、レガシーの下位互換性のために逆になりました...新しい、邪魔にならない方法が＃1880で開発されました（しかしまだ実装されていません）。

seven-phases-max 2016年04月09日

さて、私にそれを説明するために時間を割いてくれてありがとうマックス！

ルサム。 9avr。 2016年13時46、マックス・ミハイロフ[email protected] A
écrit：

しかし、それが
ディフォルト？
これをデフォルトにすると、既存のLessコードベースの多くが壊れます。一度
（〜v1.4.0で）実際にデフォルトにする試みがありましたが、
次に、レガシーの下位互換性のために逆になります...新しい、
邪魔にならない方法が＃1880で開発されました
https://github.com/less/less.js/issues/1880 （ただし、実装されていません
まだ））。
—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示してください
https://github.com/less/less.js/issues/974#issuecomment -207776654

rkyoku 2016年04月09日

私はこれを解決しました：

.calc(<strong i="6">@prop</strong>, @val) {
    @{prop}: ~"calc(~'@{val}')";
    @{prop}: ~"-moz-calc(~'@{val}')";
    @{prop}: ~"-webkit-calc(~'@{val}')";
    @{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");

command lineを使用すると、それは正しいです。 less-loaderが正しくありません。だから私はstackoverflowでこの解決策を見つけました

私はそれを私のコードにコピーします、悲しいことにそれも正しくありません。だから私は何かを変更しました。できます！

残念ながら、コマンドラインは正しくありません!!😂😂😂

mqliutie 2016年09月01日

この問題が解決された理由がわかりません。 LessがネイティブCSSの動作を変更することは意味がありません。

vincentmorneau 2016年11月03日

...少ないとネイティブCSSの動作が変わります。

そうではありません。 --strict-math=on設定するだけです（ --strict-math=offに応じて、膨大な量のLessプロジェクトと互換性があるため、デフォルトでは有効になっていません。また、＃1880で説明したいくつかの考慮事項もあります）。

seven-phases-max 2016年11月04日

👍1

UIkit 3テーマでは、これをmy_theme.lessます：

height: ~"calc(100vh - 20px)";

そしてそれは機能します。

oshihirii 2017年08月06日

👍4 😕1

* .lessファイルhttps://github.com/less/less.js/issues/974#issuecomment-9229470に書き込むときに機能しました

@lukeapageに感謝し

quytm2239 2017年10月16日

こんにちは@mqliutiecalcのmixin提案を追加してくれてありがとう、しかし、コンパイルを壊していたあなたのMixinに余分な〜があります：

ミックスインは

.calc(<strong i="8">@prop</strong>, @val) {
    @{prop}: ~"-webkit-calc('@{val}')";
    @{prop}: ~"-moz-calc('@{val}')";
    @{prop}: ~"calc('@{val}')";
}

次のように入力します。
.calc（width、 "100％-60px"）;

次のように出力します。
幅：calc（100％-60px）;

ciaranlp 2017年10月19日

なぜこの問題は解決されたのですか？！修正されていません。

calc(50% - 20px)を書いても、まだcalc(30%)を受け取っています。これは誰もが望んでいることではあり間違っているという事実は別として、100％の信頼性（同じ単位など）で計算できない限り、calc（）にそのままにしておく必要があります。 LESS2.7.3を使用しています。

この号を再度開いてください。

thany 2018年01月25日

👍1

@thany
これらのコメントを参照してください。数学処理のデフォルト設定は履歴の副産物であり、デフォルト設定はいつでも変更できますが、これが正確に問題ではないことを説明しています。
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654

jonjohnjohnson 2018年01月25日

@jonjohnjohnsonそれは問題を再び述べているだけです。 strictモードで修正された場合（まだ試していませんが、バグを回避するためにすべての種類のデフォルト以外のフラグを有効にする必要はありません）、デフォルトでオンになっているはずです。

どのように言っても、この問題はいかなる定義によっても修正されていません。

thany 2018年01月26日

@thany私は、開発者が問題ではないと判断したことを理解できるように手助けしようとしていました。これらのコメントは、問題を言い換えるだけでなく、問題に対する開発者のスタンスを説明しています。幸運を。

jonjohnjohnson 2018年01月26日

@thany

その後、デフォルトでオンになっているはずです。

これがすぐに無数のプロジェクトを壊してしまうからではありません。したがって、デフォルトの動作を問題として扱う場合は、文書化されたオプションを設定するだけで完了します。任意の定義による。

なぜこの問題は解決されたのですか？！

デフォルトの動作を改善する方法の最新の議論がここにあるからです。

seven-phases-max 2018年01月26日

@thany @

matthew-dean 2018年01月27日

 width: 15%;
 height: ~"calc(width)";

高さ=幅の作り方

xiaomizhou66 2018年11月18日

👍1

@ xiaomizhou66
それはLESSやこの問題とは何の関係もありません。それは純粋にCSSの質問です。「csskeepaspect」のようなものを検索してください。いくつかの答えが見つかります。

thany 2018年11月26日

だからこれはまだ壊れています。 calc（100vh-138px）は-38pxになります。

willatathena 2019年03月15日

@willatathena

Less 3.xでこの問題が発生した場合は、別のバグレポートを作成してください。
以前のLessバージョンでは、これはデフォルトで予期される動作です（上記の投稿を読んで、処理方法を確認してください）。

seven-phases-max 2019年03月16日

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

0 / 5 - 0 評価

Less.js: CSS3 calc（）関数はLESSでは機能しません

最も参考になるコメント

全てのコメント51件

関連する問題