☰

LESS-CSS 上書き calc() を無効にする [重複] 質問する

tag-icon • tag-icon css less css-calc
LESS-CSS 上書き calc() を無効にする [重複] 質問する

今、私は CSS3 の LESS コードでこれを実行しようとしています:

width: calc(100% - 200px);

ただし、LESS をコンパイルすると、次のように出力されます。

width: calc(-100%);

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

ベストアンサー1

使用してエスケープされた文字列(別名エスケープされた値):

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

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

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

コンパイル結果:

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

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

おすすめ記事