web-dev-qa-db-ja.com

LESS-CSSの上書きを無効にするcalc（）

今私は私のLESSコードでCSS3でこれをやろうとしています：

width: calc(100% - 200px);

しかし、LESSがコンパイルすると、これを出力しています。

width: calc(-100%);

そのようにコンパイルしないようにLESSに指示し、普通にそれを出力する方法はありますか？

csscss3lesscss-calc
416
AJStacy

エスケープ文字列 （エスケープ値）を使用します。

width: ~"calc(100% - 200px)";

また、Less数学とエスケープ文字列を混在させる必要がある場合は、次のようにします。

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

にコンパイル：

width: calc(100% - 15rem + 15px + 2em);

これはLessがデフォルトで値（エスケープされた文字列と数学の結果）をスペースと連結するので機能します。

766
Fabrício Matté

私の他の答え で説明されているようにエスケープされた値を使うこととは別に、 厳密数学 設定を有効にすることによってこの問題を解決することも可能です。

厳密な数学をオンにすると、不要な括弧の内側にある数学のみが処理されるので、コードは次のようになります。

width: calc(100% - 200px);

厳密な数学オプションを有効にしても期待通りに動作します。

しかし、Strict Mathはcalc()の中だけでなくグローバルに適用されることに注意してください。つまり、あなたが持っているなら：

font-size: 12px + 2px;

数学はLessで処理されなくなります - 明らかに無効なCSSであるfont-size: 12px + 2pxを出力します。 Lessで処理されるべきすべての数学を（以前は不要だった）括弧で囲む必要があります。

font-size: (12px + 2px);

厳密な数学は新しいプロジェクトを始めるときに考慮すべき良い選択肢です、さもなければあなたはおそらくコードベースの大部分を書き直さなければならないでしょう。最も一般的なユースケースでは、 他の答え で説明されているエスケープ文字列アプローチがより適しています。

62
Fabrício Matté

これは、CSSのcalcを任意のプロパティで使用するためのクロスブラウザの少ないmixinです。

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

使用例

.calc(width; "100% - 200px");

そして出力されるCSS：

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

この例のcodepen： http://codepen.io/patrickberkeley/pen/zobdp

23
Patrick Berkeley

変数付きのエスケープ文字列の例：

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

にコンパイル

div {
    height: calc(100vh - 10px );
}
13
Achim Koellner

Fabricioのソリューションはうまく機能します。

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

そうすることができます：

@someMarginVariable: 15px;

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

あるいは以下のようなミックスインを使うことができます。

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}
6
Sebastien Lorber