CSS 覆盖変数

ローカル変数でグローバル変数を覆う

前ページで学んだように、全体のドキュメントでグローバル変数にアクセス/使用することができますが、ローカル変数は宣言したセレクタ内でのみ使用できます。

前ページの例を見てください：

例

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

自分で試してみる

時には、変数がページの特定の部分にのみ変更されることを望みます。

ボタン要素が異なる青色を使用したい場合、ボタンセレクタ内で --blue 変数を再宣言できます。このセレクタで var(--blue) を使用するときは、ここで宣言された局所の --blue 変数の値を使用します。

局所の --blue 変数が button 要素の全体的な --blue 変数を覆うことがわかります：

例

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

自分で試してみる

新しいローカル変数の追加

もし一か所で変数を使用する場合、新しいローカル変数を宣言することもできます。以下のように：

例

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

自分で試してみる

ブラウザサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザバージョンが示されています。

関数
var() 49.0 15.0 31.0 9.1 36.0

CSS var() ファンクション

関数 説明
var() CSS 変数の値を挿入します。