CSSのvarとはどういう意味ですか?

CSS の var() 関数は、変数の保存および使用関数を提供し、値を変数に割り当ててスタイル シート全体で使用できます。使用法: 1. -- プレフィックスを使用して変数を宣言します (--: <値>)。 2. var() 関数を使用して変数値を取得します (var(--<変数名>) ;) )。 var() を使用すると、再利用性、一貫性、メンテナンスが容易になり、メディア クエリや JavaScript 変数に基づいて調整される値を作成できます。

#CSS の var とは何ですか?

CSS の var() 関数を使用すると、変数を保存して使用できます。これにより、変数に値を割り当て、その変数をスタイルシート全体で再利用できます。

var の使用方法

var() を使用するには、次の手順に従います。

1. 変数を宣言する: CSS 変数を宣言するには、-- プレフィックスを使用します。構文は次のとおりです。 --<変数名>: <値>;</p> <li>変数の使用: <code>var() 関数を使用して、変数の値を取得します。変数。構文は次のとおりです: var(--<変数名>);

例

たとえば、次のコードは次のように宣言します。 a --primary-color という名前の変数を青に設定します:

<code class="css">:root {
  --primary-color: blue;
}</code>

ログイン後にコピー

この変数をスタイルシートの他の部分で使用できます:

<code class="css">.heading {
  color: var(--primary-color);
}</code>

ログイン後にコピー

利点

CSS 変数を使用することには、次のような多くの利点があります。

• 再利用性:複数の要素で変数を簡単に使用できるため、コストを削減できます。コードの重複。
• 一貫性: 変数は、スタイルシート全体で値の一貫性を確保することで、スタイル ガイドの維持に役立ちます。
• 保守が簡単: 変数の値を変更する必要がある場合、宣言内で 1 回変更するだけで済みます。
• 動的値: var() 関数を使用すると、メディア クエリや JavaScript 変数に基づいたサイズ変更や色付けなどの動的値を作成できます。

#注意

変数は、使用する要素の前に宣言する必要があります。
• var(--var-1) などのネストされた変数を使用できます。
• var() この関数は、var(--var-1 var(--var-2)) などの計算式をサポートしていません。

以上がCSSのvarとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。