1. ホーム
  2. css

[解決済み] LESS-CSSの上書きcalc()を無効にする [重複] [重複

2022-03-23 10:24:04

質問

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

width: calc(100% - 200px);

しかし、LESSがコンパイルするとこのように出力されます。

width: calc(-100%);

LESSにそのようにコンパイルせず、普通に出力するように指示する方法はありますか?

どのように解決するのですか?

を使用することで エスケープ文字列 (別名:エスケープされた値)。

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


また、Lessの計算とエスケープされた文字列を混在させる必要がある場合に備えて。

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

にコンパイルします。

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

これは、Less がデフォルトでスペースで値 (エスケープされた文字列と計算結果) を連結するように動作します。