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

LESS-CSS の上書き calc()

LESS-CSS では、calc() 関数の構文が変更される傾向があり、予期しない出力が発生します。これに対処するには、LESS による構文の変更を防ぐ代替方法が必要です。

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

効果的な解決策の 1 つは、エスケープ文字列 (別名エスケープ文字列) を使用することです。エスケープされた値として。引用符の前にチルダ文字 (~) を使用すると、LESS はその内容をリテラル文字列として解釈し、計算や変更を実行できなくなります。

たとえば、calc(100%) を出力したい場合、 - 200px) 変更せずに、次の構文を使用します:

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

Escaped Less Math を含む文字列

Less math とエスケープ文字列を組み合わせる必要がある場合、

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

LESS はデフォルトでこれらの値をスペースと連結します。目的の出力:

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

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