コンパイラが CSS `calc()` プロパティを誤って評価しないようにするにはどうすればよいですか?

Less および CSS Calc() プロパティ: 積極的なコンパイルの妨げ

OrangeBits や dotless などの Less コンパイラーはコンパイルと評価を試行する可能性がありますCSS calc() プロパティにより、不正確な結果が発生します。この記事では、この動作を防止し、必要な CSS スタイルを維持する方法を検討します。

Less のデフォルト動作

calc() 内の式を積極的に評価するためにあまり使用されず、誤った結果が生じる。たとえば、body { width: calc(100% - 250px - 1.5em); } は、body { width: calc(-151.5%); に誤って変換されます。 }.

Less の解決策

これを実行します:

body { width: calc(~"100% - 250px - 1.5em"); }

~ 演算子を使用することで、Less に式を無視するよう指示します。コンパイル。

Solution for Less v3.00 およびその後、

Less はデフォルトで calc() 内の式を自動的に評価しなくなりました。したがって、Less v3.00 以降では、積極的なコンパイルを防ぐための特別なアクションは必要ありません。

Strict Maths Option

Less 1.4.0 には、すべての Less 計算を括弧で囲む必要がある strictMaths オプション。このオプションにより、calc() は変更を加えることなく意図したとおりに動作します。デフォルトでは、このオプションは Less 1.4.0 のリリース バージョンではオフになっています。

以上がコンパイラが CSS `calc()` プロパティを誤って評価しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。