web-dev-qa-db-ja.com

CSS3 calcによるそれほど積極的でないコンパイル

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

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

に

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

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

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

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

csscss3compilationlesscss-calc
321
Nick Babcock

v3.00 のため、lessはもはやデフォルトでcalc内の式を評価しません。

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

これを行う：

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

Less 1.4.0では、すべてのLess計算を角括弧で囲む必要があるstrictMathsオプションがあるので、calcはそのまま使用できます。これは大きな破壊的変更であるため、これはオプションです。初期の1.4.0では、このオプションがデフォルトでオンになっていました。リリース版ではデフォルトでオフになっています。

513
Luke Page

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

次のようにできます：

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
35
Sebastien Lorber

同じ結果をもたらすエスケープオプションがいくつかあります。

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

この記事で説明されているように、エスケープされたcalcの中に変数を含めるもっときれいな方法があります：CSS3 calc（）関数はLess＃974では動作しません

@variable: 2em;

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

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

8
brohr