← CSS44 / 62

Custom properties (variabel CSS)

Variabel CSS dideklarasikan dengan dua tanda hubung dan dipakai lewat var(). Biasanya ditaruh di :root agar berlaku global. Bedanya dengan variabel Sass: ini hidup di browser, bisa berubah saat runtime dan diwarisi oleh anak — dasar dari theming dan dark mode modern. Karena sifatnya diwarisi, variabel yang dideklarasikan di sebuah komponen hanya berlaku untuk komponen itu beserta turunannya — cara sederhana membuat tema lokal.

👀 Contoh dulu

:root {
  --biru: #0284c7;
  --radius: 6px;
}

.tombol { background: var(--biru); border-radius: var(--radius); }
.tautan { color: var(--biru); }

Hasilnya: Tombol dan tautan memakai warna yang sama. Mengubah --biru sekali otomatis mengubah keduanya.

💡 Deklarasi WAJIB pakai dua tanda hubung (--nama), pemakaian WAJIB lewat var(--nama).

📝 Sekarang giliranmu

Deklarasikan --warna-utama: #2563eb di :root, lalu pakai var(--warna-utama) sebagai background pada .tombol.

Preview
← SebelumnyaBerikutnya →