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 変数が、ボタン要素のグローバルな --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; /* local variable will override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
新しいローカル変数を追加する
変数を 1 つの場所でのみ使用する場合は、次のように新しいローカル変数を宣言することもできます。
例
: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; /* new local variable */
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() 関数
|
財産 |
説明 |
|---|---|
| だった（） | CSS 変数の値を挿入します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。