CSSの変数とは何ですか

CSS では、変数はカスタム属性を指します。カスタム属性は、正当な識別子と正当な値を持ち、どこでも使用できます。 CSS 変数は DOM にアクセスできるため、開発者はローカルまたはグローバル スコープの変数を作成したり、JavaScript を使用して変数を変更したり、メディア クエリに基づいて変数を変更したりすることができます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS カスタム プロパティは CSS 変数とも呼ばれます。変数には法的な識別子と法的な値があり、どこでも使用できます。 var() 関数を通じて変数を使用します。例: var(--example) は、--example に対応する値を返します。

var() 関数は、CSS 変数の値を挿入するために使用されます。

CSS 変数は DOM にアクセスできます。つまり、ローカルまたはグローバル スコープで変数を作成したり、JavaScript を使用して変数を変更したり、メディア クエリに基づいて変数を変更したりできます。

CSS 変数を使用する優れた方法には、デザインの色が含まれます。同じ色を何度もコピーして貼り付ける代わりに、それらを変数に入れることができます。

#基本的な使用法:

#ローカル変数を宣言:

• #

  element {
    --main-bg-color: brown;
  }

# #ローカル変数を使用します:

• element {
    background-color: var(--main-bg-color);
  }

グローバル CSS 変数を宣言します:

• :root {
    --global-color: #666;
    --pane-padding: 5px 42px;
  }

グローバル CSS 変数を使用します:

• .demo{
     color: var(--global-color);
  }

  Supplement

:root は CSS 疑似クラスであり、ルートと一致します。ドキュメントツリー要素の。 HTML の場合、:root は 要素を表し、優先順位が高いことを除けば html セレクターと同じです。したがって、通常はカスタム属性を :root{} に記述し、HTML タグ内の要素はそれを継承します。

• CSS カスタム プロパティはカスケードできます。各カスタム プロパティは複数回出現でき、変数の値はカスケード アルゴリズムとカスタム プロパティ値を使用して計算されます。

• CSS 変数は ! important 宣言をサポートしていません。これは単なる宣言であることに注意してください。

• (学習ビデオ共有:

  css ビデオ チュートリアル
)

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