ホームページ > ウェブフロントエンド > CSSチュートリアル > LESS を使用するときに `calc()` 機能を維持するにはどうすればよいですか?

LESS を使用するときに `calc()` 機能を維持するにはどうすればよいですか?

DDD
リリース: 2024-12-07 19:23:16
オリジナル
146 人が閲覧しました

How Can I Preserve `calc()` Functionality When Using LESS?

LESS での calc() 機能の保持

LESS スタイルシートで calc() 関数を使用すると、コンパイルの問題が発生し、間違った結果が出力されます。これを解決するために、開発者はエスケープ文字列 (エスケープ値とも呼ばれます) を利用できます。

元の calc() 関数を保持するには、以下に示すように、文字列内の先頭にチルダ (~) を追加します。

width: ~"calc(100% - 200px)";
ログイン後にコピー

これにより、LESS は calc() をプレーンな文字列として解釈し、途中で変更されるのを防ぎます。

Less math とエスケープ文字列を組み合わせる必要があるシナリオでは、次の構文を使用します。

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");
ログイン後にコピー

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

width: calc(100% - 15rem + 15px + 2em);
ログイン後にコピー

Byエスケープ文字列を利用することで、開発者は calc() 関数が正しく解釈され、LESS によって期待どおりに出力されることを確認できます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート