Materi
Custom property adalah nilai yang kamu beri nama sendiri lalu pakai ulang di banyak aturan. Namanya selalu diawali dua tanda hubung dan peka huruf besar-kecil, dan isinya dibaca kembali dengan fungsi var().
:root {
--warna-utama: #5a3fb0;
--jarak: 16px;
}
.tombol {
background: var(--warna-utama);
padding: var(--jarak);
}Selektor :root menunjuk elemen html, dan custom property diwariskan ke semua keturunannya, sehingga nilai yang ditulis di :root berlaku di seluruh halaman. Karena diwariskan, nilai yang sama dapat ditimpa untuk satu cabang saja: menulis --warna-utama di dalam aturan .kartu-gelap mengubah semua pemakaian var(--warna-utama) di dalam kartu itu, tanpa menyentuh aturan lain di halaman.
Fungsi var() menerima nilai cadangan setelah tanda koma: var(--jarak, 12px) memakai 12px kalau --jarak belum pernah didefinisikan. Tanpa cadangan, memakai nama yang tidak ada membuat deklarasi itu dianggap tidak sah saat nilainya dihitung, dan properti memakai nilai warisannya atau nilai awalnya.
Contoh di luar latihan: satu halaman laporan menyimpan --lebar-samping: 220px di :root, lalu memakainya di grid-template-columns dan sekali lagi di dalam media query. Mengubah lebar sidebar cukup di satu baris, dan kedua tempat itu ikut berubah.
