LESS CSS による `calc()` 式の変更を防ぐにはどうすればよいですか?

LESS CSS Calc() コンパイルの問題の克服

LESS コード内で calc() を利用しようとすると、開発者は次の問題に遭遇する可能性があります。 LESS コンパイラによって計算が変更され、その結果、正しくない出力が生成されます。たとえば、次のコード:

width: calc(100% - 200px);

は次のようにレンダリングされます:

width: calc(-100%);

これを解決するには、LESS 内でエスケープ文字列を使用できます。このアプローチにより、calc() 式を文字列として扱うことができ、コンパイラーによる操作を防止できます。

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

これにより、最終出力が元のコードと一貫性を保つことが保証されます。さらに、以下に示すように、Less 数学とエスケープ文字列を組み合わせることができます:

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

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

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

Less はデフォルトで値をスペースと連結し、有効にします。エスケープされた文字列と計算結果をシームレスに統合します。この手法を実装すると、LESS による calc() 式の上書きが効果的に無効になります。

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