348

私が使用しているLessコンパイラ（OrangeBitsおよびdotless 1.3.0.5 ）は積極的に翻訳しています

body { width: calc(100% - 250px - 1.5em); }

の中へ

body { width: calc(-151.5%); }

これは明らかに望ましくありません。コンパイル中に属性を本質的に無視するようにLessコンパイラに通知する方法があるかどうか疑問に思っています。Lessのドキュメントと両方のコンパイラのドキュメントを検索しましたが、何も見つかりませんでした。

LessまたはLessコンパイラはこれをサポートしていますか？

そうでない場合は、CSSエクステンダーがありますか？

4

4 に答える 4

548

calcLessは、以降、デフォルトで内部の式を評価しなくなりましv3.00た。

元の答え（Less v1.x...2.x）：

これを行う：

body { width: calc(~"100% - 250px - 1.5em"); }

Less 1.4.0strictMathsでは、すべてのLess計算を角かっこで囲む必要があるオプションがあるため、 「すぐに使用できるcalc」状態で機能します。これは大きな重大な変更であるため、オプションです。1.4.0の初期のベータ版では、デフォルトでこのオプションがオンになっています。リリースバージョンでは、デフォルトでオフになっています。

于 2012-08-15T16:35:34.543 に答える
38

calcの非常に一般的な使用例は、100％の幅を取り、要素の周囲にマージンを追加することです。

次の方法でこれを行うことができます。

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
于 2014-06-11T15:24:51.177 に答える
31

同じ結果になるいくつかのエスケープオプションがあります。 

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
于 2015-10-19T20:30:23.823 に答える
9

この投稿で説明されているように、エスケープされたcalc内に変数を含めるためのより良い方法があります：CSS3 calc（）関数はLess＃974では機能しません

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

中括弧を使用することにより、エスケープする引用符を閉じて再度開く必要はありません。

于 2017-12-19T20:39:19.437 に答える