LESS-CSS が `calc()` 関数を上書きしないようにするにはどうすればよいですか?

calc() 関数の LESS-CSS 上書きの無効化

LESS-CSS を使用する場合、calc() 関数が関数はコンパイル時に上書きされるため、不正な出力が発生します。これに対処するために、この上書きを無効にする手法があります。

解決策: エスケープされた文字列

効果的な方法は、エスケープされた文字列内で calc() 関数を囲むことです。 。エスケープ文字列は、文字列の前後にチルダ (~) を置くことで表されます。このアプローチは、文字列の内容を変更せずに保持するように LESS-CSS に効果的に指示します。

例:

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

コンパイルすると、次のように出力されます:

width: calc(100% - 200px);

ご希望に応じて。

追加考慮事項

エスケープ文字列に Less math を組み込む必要がある場合は、エスケープ文字列と数学演算を組み合わせて使用​​できます。例:

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

これは次のようにコンパイルされます:

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

デフォルトでは、Less は値 (エスケープ文字列と計算結果) をスペースで連結します。

以上がLESS-CSS が `calc()` 関数を上書きしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。