Menggunakan var()

Mendeklarasikan variabel baru saja setengah pekerjaan; nilai itu harus dibaca, dan var() adalah jembatannya. Kita sebenarnya sudah mencicipinya dua kali: pada chapter calc() untuk menghitung lebar konten, dan pada token elevasi di chapter Box Shadow. Chapter ini membedah var() secara utuh — mulai dari pembacaan dasar, nilai cadangan, hingga perilaku pewarisan yang membuat satu variabel bisa bernilai berbeda di bagian halaman yang berbeda.

Membaca Nilai dengan var() #

Fungsi var(--nama) menggantikan dirinya sendiri dengan isi variabel --nama sebelum browser menghitung tampilan. Pemakaiannya bebas: sebagai nilai penuh satu property, sebagai potongan nilai yang lebih besar, atau bahkan di dalam variabel lain:

:root {
  --warna-aksen: #1f6f54;
  --lebar-sidebar: 240px;
  --border-aksen: 2px solid var(--warna-aksen);
}

.header-situs {
  border-bottom: var(--border-aksen);
}

.konten-utama {
  width: calc(100% - var(--lebar-sidebar));
}

Mari kita telaah tiga bentuk pemakaiannya:

1. var(--border-aksen): nilai penuh untuk satu property. Variabel itu sendiri berisi nilai utuh yang merujuk variabel lain — var() di dalam var() adalah hal biasa.
2. calc(100% - var(--lebar-sidebar)): var() menjadi potongan dari ekspresi calc() yang lebih besar, persis pola yang kita bangun pada chapter calc().
3. Substitusi terjadi sebelum perhitungan: browser mengganti seluruh var() dengan isinya terlebih dahulu, baru menilai apakah hasil akhirnya valid untuk property tersebut.

Nilai Cadangan dengan Fallback #

var() menerima parameter kedua sebagai nilai cadangan (fallback) yang dipakai bila variabel yang dirujuk tidak terdefinisi:

.tombol-premium {
  background-color: var(--warna-premium, #b45309);
  border-color: var(--warna-premium, var(--warna-aksen, #1f6f54));
}

Beberapa aturan yang perlu diingat:

• Cadangan hanya dipakai bila variabel tidak terdefinisi, bukan bila nilainya tidak cocok untuk property — kasus kedua dibahas di bawah.
• Cadangan boleh berisi var() lain, sehingga rantai cadangan bisa dibangun berlapis.
• Semua nilai setelah koma pertama dihitung satu cadangan utuh: var(--font-utama, system-ui, sans-serif) bermakna cadangannya adalah system-ui, sans-serif, bukan dua cadangan terpisah.

Kedua tombol berikut memakai cadangan yang sama, #b45309 — yang membedakan hanyalah apakah variabel yang dirujuk terdefinisi:

Fallback berguna untuk token opsional yang belum tentu didefinisikan setiap halaman. Jangan jadikan fallback tempat menyembunyikan salah eja — pola itu justru menutupi kesalahan, seperti pada tabel kesalahan umum di akhir chapter.

Pewarisan dan Penimpaan Lokal #

Custom properties adalah property biasa dalam satu hal penting: nilainya mewarisi ke seluruh turunan. Deklarasi di :root terlihat oleh setiap elemen; deklarasi di elemen tertentu berlaku untuk subtree di bawahnya saja. Ketika satu nama dideklarasikan di beberapa tempat, variabel-variabel itu sendiri mengikuti cascade: nilai pemenang di elemen tersebut yang dibaca oleh var().

.panel-gelap {
  --warna-aksen: #5ec9a0; /* menimpa nilai :root hanya di dalam panel ini */
  background-color: #10161c;
}

.panel-gelap .tombol {
  background-color: var(--warna-aksen); /* membaca nilai penimpaan */
}

Satu class, satu perubahan, dan seluruh isi subtree mengikuti — pola ini adalah dasar dari tema per komponen.

Demo berikut menampakkan tiga tombol dengan sumber nilai yang berbeda: aksen dari :root, penimpaan lokal di dalam panel, dan fallback untuk variabel yang tidak terdefinisi:

Saat Nilai Tidak Valid #

Browser tidak bisa menilai kesesuaian nilai saat mengurai deklarasi, karena belum tahu var() itu akhirnya dipakai di property mana. Penilaian dilakukan belakangan, saat nilai dihitung:

:root {
  --jarak: merah; /* bukan nilai panjang */
}

.kartu-salah {
  padding: var(--jarak); /* tidak valid saat nilai dihitung */
}

Property yang mewarisi mengikuti nilai induk, sedangkan property yang tidak mewarisi (seperti padding) kembali ke nilai initial-nya — inilah bedanya dengan fallback: cadangan menyelamatkan variabel yang tidak ada, bukan nilai yang tidak cocok.

Kesalahan Umum #

Ringkasan #

var(--nama) menggantikan dirinya dengan isi variabel, boleh menjadi bagian dari nilai yang lebih besar, dan boleh bertingkat di dalam variabel lain. Parameter kedua var() memberi nilai cadangan untuk variabel yang tidak terdefinisi, sedangkan nilai yang tidak cocok untuk property berakhir unset saat dihitung. Karena variabel mewarisi dan mengikuti cascade, satu penimpaan lokal cukup untuk mengubah tema seluruh subtree. Berikutnya kita menerapkan mekanisme ini pada keputusan desain yang paling sering berubah: warna.