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

下次还敢
リリース: 2024-04-28 16:33:17
オリジナル
1057 人が閲覧しました

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

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

#CSS の var とは何ですか?

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

var の使用方法

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

  1. 変数を宣言する: CSS 変数を宣言するには、-- プレフィックスを使用します。構文は次のとおりです。 --<変数名>: <値>;</p> <li>変数の使用: <code>var() 関数を使用して、変数の値を取得します。変数。構文は次のとおりです: var(--<変数名>);
  2. たとえば、次のコードは次のように宣言します。 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 サイトの他の関連記事を参照してください。

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