CSS variable (nama resminya custom property) adalah nilai yang kamu simpan sekali dengan sebuah nama, lalu kamu pakai di banyak tempat. Ganti nilainya di satu tempat, semua yang memakainya ikut berubah. Kayak kontak di HP: kamu nelpon lewat nama, nomornya cukup disimpan sekali.
Bikin variabel, lalu pakai
<h1>Judul</h1>
<button class="tombol">Daftar</button>
<style>
:root {
--primary: blue;
--radius: 8px;
}
h1 {
color: var(--primary);
}
.tombol {
background: var(--primary);
border-radius: var(--radius);
}
</style>
:rootadalah selector buat elemen paling atas halaman, yaitu<html>. Variabel yang dibuat di sini bisa dipakai oleh semua selector lain. Tempat buat variabel global.--primary: blue;membuat variabel bernama--primarydengan nilaiblue. Nama variabel selalu diawali dua tanda hubung--. Sisanya sama kayak properti biasa: nama, titik dua, nilai, titik koma.var(--primary)membaca isi variabel itu. Tulis di tempat nilai biasanya berada:color: var(--primary);hasilnya sama dengancolor: blue;.--radius: 8px;menunjukkan variabel gak cuma buat warna. Isinya boleh nilai apa saja: ukuran, atau nilai panjang kayak bayangan0 2px 8px rgba(0,0,0,0.1).
Hasilnya, judul biru dan tombol biru dengan sudut 8px. Ganti --primary jadi green di :root, judul dan tombolnya langsung hijau dua-duanya, tanpa menyentuh aturan h1 dan .tombol.
Jadi ada dua langkah: simpan di :root dengan --nama: nilai;, lalu pakai dengan var(--nama). Kalau nilainya diketik ulang di tempat lain, misalnya color: blue;, variabelnya gak dipakai, dan nanti gak ikut berubah.
Nilai cadangan
.tombol {
background: var(--aksen, gray);
}
Isi kedua di dalam var() adalah nilai cadangan. Kalau --aksen belum pernah dibuat, browser memakai gray. Kalau --aksen ada, cadangannya diabaikan.
Variabel khusus satu bagian
.promo {
--primary: orange;
}
Variabel juga bisa dibuat di selector lain, bukan cuma :root. Di dalam .promo, var(--primary) jadi orange. Di luar .promo, nilainya tetap blue dari :root. Yang paling dekat dengan elemennya yang menang.
⚠️ Jebakan yang sering ketemu
- Lupa
var().color: --primary;gak jalan. Variabel cuma bisa dibaca lewatvar(--primary). - Lupa dua tanda hubung.
var(primary)atau-primarygak dikenal. Namanya harus--primary, di tempat bikin dan di tempat pakai. - Huruf besar-kecil beda.
--Warnadan--warnaadalah dua variabel yang berbeda. - Pakai
$atau@.$warnadan@warnaitu variabel Sass dan Less, bukan CSS.
💡 Bisa diubah JavaScript. Variabel CSS hidup di browser, jadi JavaScript bisa menggantinya saat halaman sedang jalan, misalnya
document.documentElement.style.setProperty('--primary', 'red'). Itu cara gampang bikin tombol mode gelap.
🔬 Coba sendiri
Ganti nilai variabelnya dan lihat semua yang memakainya ikut berubah.
TL;DR: Simpan nilai sekali di :root dengan --nama: nilai; (dua tanda hubung di depan), lalu pakai di mana saja dengan var(--nama). Ganti nilainya di satu tempat, semua ikut berubah. var(--nama, cadangan) memakai cadangan kalau variabelnya belum ada. Variabel yang dibuat di selector lain, misalnya .promo, cuma berlaku di dalamnya.
