Variabel Override CSS
Ganti Variabel Global Dengan Variabel Lokal
Dari halaman sebelumnya kita telah mempelajari bahwa variabel global dapat diakses/digunakan melalui seluruh dokumen, sedangkan variabel lokal hanya dapat digunakan di dalam selektor tempat ia dideklarasikan.
Lihat contoh dari halaman sebelumnya:
Contoh
: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;
}
Terkadang kita ingin variabel berubah hanya di bagian halaman tertentu.
Asumsikan kita menginginkan warna biru yang berbeda untuk elemen tombol. Kemudian, kita dapat mendeklarasikan kembali variabel --blue di dalam pemilih tombol. Ketika kita menggunakan var(--blue) di dalam pemilih ini, itu akan menggunakan nilai variabel --blue lokal yang dideklarasikan di sini.
Kita melihat bahwa variabel --blue lokal akan menimpa variabel --blue global untuk elemen tombol:
Contoh
: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;
}
Tambahkan Variabel Lokal Baru
Jika sebuah variabel akan digunakan hanya di satu tempat, kita juga bisa mendeklarasikan variabel lokal baru, seperti ini:
Contoh
: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;
}
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung
var()fungsi tersebut.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Fungsi
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |