ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS `calc()` プロパティを使用するときにコンパイラ エラーを減らすにはどうすればよいですか?

CSS `calc()` プロパティを使用するときにコンパイラ エラーを減らすにはどうすればよいですか?

DDD
DDDオリジナル
2025-01-02 19:51:40631ブラウズ

How Can I Avoid Less Compiler Errors When Using CSS `calc()` Properties?

Less コンパイラーが CSS calc() プロパティを誤解する

OrangeBits やドットレスなどの特定の Less コンパイラーは、CSS calc() 式を誤って変換します。たとえば、式「width: calc(100% - 250px - 1.5em)」は誤って「width: calc(-151.5%)」に変換されます。

Less 3.00 以降の解決策

Less バージョン 3.00 以降では、コンパイラcalc() 内の式を自動的に評価しなくなりました。この変更により、calc() を使用する際の手動介入の必要がなくなります。

以前の Less バージョンでの解決策

3.00 より前の Less バージョンの場合、ユーザーは囲むことで自動評価を防ぐことができます。 ~ 演算子の中の calc() 式。例:

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

さらに、Less バージョン 1.4.0 では、すべての Less 計算を括弧で囲む必要がある strictMaths オプションが導入されました。このオプションにより、calc() 式がデフォルトで正しく処理されるようになります。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。