Variabel CSS - Fungsi var()
Variabel CSS
Fungsi var()
ini digunakan untuk memasukkan nilai dari variabel CSS.
Variabel CSS memiliki akses ke DOM, yang berarti Anda dapat membuat variabel dengan cakupan lokal atau global, mengubah variabel dengan JavaScript, dan mengubah variabel berdasarkan kueri media.
Cara yang baik untuk menggunakan variabel CSS adalah dalam hal warna desain Anda. Alih-alih menyalin dan menempelkan warna yang sama berulang kali, Anda dapat menempatkannya dalam variabel.
Cara Tradisional
Contoh berikut menunjukkan cara tradisional untuk mendefinisikan beberapa warna dalam lembar gaya (dengan menentukan warna yang akan digunakan, untuk setiap elemen tertentu):
Contoh
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Sintaks Fungsi var()
Fungsi var()
ini digunakan untuk memasukkan nilai dari variabel CSS.
Sintaks var()
fungsinya adalah sebagai berikut:
var(--name, value)
Value | Description |
---|---|
name | Required. The variable name (must start with two dashes) |
value | Optional. The fallback value (used if the variable is not found) |
Catatan: Nama variabel harus dimulai dengan dua tanda hubung (--) dan peka huruf besar/kecil!
Bagaimana var() Bekerja
Pertama-tama: Variabel CSS dapat memiliki cakupan global atau lokal.
Variabel global dapat diakses/digunakan melalui seluruh dokumen, sedangkan variabel lokal hanya dapat digunakan di dalam pemilih di mana ia dideklarasikan.
Untuk membuat variabel dengan cakupan global, deklarasikan di dalam :root
pemilih. Pemilih :root
cocok dengan elemen akar dokumen.
Untuk membuat variabel dengan cakupan lokal, deklarasikan di dalam pemilih yang akan menggunakannya.
Contoh berikut ini sama dengan contoh di atas, tetapi disini kita menggunakan var()
fungsi.
Pertama, kita mendeklarasikan dua variabel global (--blue dan --white). Kemudian, kami menggunakan
var()
fungsi untuk memasukkan nilai variabel nanti di lembar gaya:
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;
}
Keuntungan menggunakan var() adalah:
- membuat kode lebih mudah dibaca (lebih dimengerti)
- membuatnya lebih mudah untuk mengubah nilai warna
Untuk mengubah warna biru dan putih menjadi biru dan putih yang lebih lembut, Anda hanya perlu mengubah dua nilai variabel:
Contoh
:root {
--blue: #6495ed;
--white: #faf0e6;
}
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;
}
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 |