Pernah nggak kamu lagi ngutak-ngatik tampilan website, terus harus ganti warna utama dari biru ke ungu — dan ujung-ujungnya kamu ctrl+F ribuan baris CSS cuma untuk mengganti satu warna yang muncul di 47 tempat berbeda? Melelahkan banget, kan? Nah, itulah masalah yang diselesaikan oleh CSS variables custom properties var().
CSS Variables — atau nama resminya Custom Properties — adalah fitur modern CSS yang memungkinkan kamu menyimpan nilai (seperti warna, ukuran font, atau jarak) dalam sebuah "wadah bernama", lalu memanggilnya di seluruh stylesheet hanya dengan fungsi var(). Ubah nilainya sekali di satu tempat, seluruh website ikut berubah. Sihir? Bukan — ini engineering yang cerdas.
Di artikel ke-11 dari Seri Belajar CSS ini, kita akan bedah tuntas cara kerja CSS Custom Properties dari nol — mulai dari cara mendeklarasikan, cara memanggilnya, sampai trik-trik pro yang bakal bikin kode CSS kamu jauh lebih rapi dan mudah dikelola.
01. Apa Itu CSS Variables Custom Properties — dan Kenapa Kamu Butuh Ini?
Bayangkan kamu punya toko cat. Setiap kali pelanggan minta warna "biru kobalt", kamu nggak campurkan pigmen dari nol — kamu ambil kaleng berlabel "Biru Kobalt" dan langsung tuang. Hemat waktu, hasilnya konsisten.
Itulah persis analogi CSS Custom Properties. Kamu simpan nilai (misalnya warna #6366f1) ke dalam "kaleng berlabel" bernama --warna-utama, lalu tinggal panggil labelnya setiap kali butuh warna itu. Ubah isi kalengnya sekali → semua yang pakai label itu otomatis berubah.
Sebelum CSS Variables ada, developer sering pakai preprocessor seperti SASS atau LESS untuk hal yang sama. Masalahnya: SASS harus di-compile dulu sebelum bisa dipakai browser — jadi kamu perlu tooling tambahan. CSS Custom Properties bekerja langsung di browser, tanpa setup apapun. Bahkan nilainya bisa diubah secara dinamis lewat JavaScript!
02. Cara Menggunakan CSS Variables Custom Properties dengan var()
Oke, cukup teori. Sekarang mari kita langsung praktik. Ada dua langkah utama: deklarasi (membuat variabel) dan penggunaan (memanggil variabel dengan var()).
Deklarasikan variabel di dalam :root
Selektor :root adalah cara terbaik untuk mendeklarasikan variabel yang berlaku global — artinya bisa dipanggil dari mana saja di stylesheet. Nama variabel harus diawali dua tanda hubung (--).
:root { --warna-utama: #6366f1; --warna-aksen: #f59e0b; --warna-teks: #1e1e2e; --font-utama: 'Plus Jakarta Sans', sans-serif; --radius-card: 12px; --shadow-lembut: 0 4px 20px rgba(0,0,0,0.08); }
Panggil variabel dengan fungsi var()
Setelah deklarasi, tinggal pakai di mana saja. Masukkan nama variabel (termasuk --) sebagai argumen fungsi var().
.tombol { background-color: var(--warna-utama); color: white; border-radius: var(--radius-card); box-shadow: var(--shadow-lembut); font-family: var(--font-utama); } .judul { color: var(--warna-teks); font-family: var(--font-utama); }
var(). Contoh: color: var(--warna-utama, #6366f1); — jika --warna-utama tidak ditemukan, browser otomatis pakai #6366f1 sebagai fallback. Super aman!Ubah nilai variabel lewat JavaScript secara dinamis
Ini salah satu kekuatan terbesar CSS Variables dibanding SASS: nilainya bisa diubah secara real-time oleh JavaScript! Ini yang memungkinkan fitur dark mode, theme switcher, atau animasi berbasis interaksi user.
// Ambil elemen :root const root = document.documentElement; // Ubah warna utama jadi merah saat tombol diklik document.getElementById('ganti-tema').addEventListener('click', () => { root.style.setProperty('--warna-utama', '#ef4444'); }); // Baca nilai variabel yang sedang aktif const nilaiSekarang = getComputedStyle(root).getPropertyValue('--warna-utama'); console.log(nilaiSekarang); // "#6366f1"
03. Scope dan Cascade — CSS Variables Bekerja Mengikuti Hirarki HTML
Salah satu keajaiban CSS Custom Properties adalah ia mengikuti sistem cascade dan inheritance CSS — sama seperti properti CSS biasa. Ini artinya kamu bisa membuat variabel yang berlaku hanya di dalam elemen tertentu, dan menimpanya untuk kasus khusus.
:root dipakai sebagai "global scope" karena ia adalah parent dari semua elemen HTML./* Variabel global — berlaku di seluruh halaman */ :root { --warna-bg: #ffffff; --warna-teks: #1e1e2e; } /* Override lokal — hanya berlaku di .dark-card dan child-nya */ .dark-card { --warna-bg: #1e1e2e; --warna-teks: #ffffff; background: var(--warna-bg); color: var(--warna-teks); } /* Elemen di dalam .dark-card otomatis mewarisi --warna-teks putih */ .dark-card p { color: var(--warna-teks); /* akan jadi putih, bukan hitam! */ }
04. Studi Kasus Nyata — Dark Mode dengan CSS Variables var()
Sekarang kita gabungkan semua konsep dalam satu studi kasus yang paling populer: membuat dark mode. Dengan CSS Custom Properties, ini bisa dilakukan hanya dengan mengganti segelintir variabel — tanpa menyentuh ratusan selector satu per satu.
Definisikan variabel untuk light dan dark mode
/* ☀️ Mode terang (default) */ :root { --bg: #ffffff; --teks: #1e1e2e; --card-bg: #f8fafc; --border: #e2e8f0; } /* 🌙 Mode gelap — override variabel yang sama! */ [data-tema="gelap"] { --bg: #0f0f1a; --teks: #e2e8f0; --card-bg: #1e1e2e; --border: #334155; } /* Komponen pakai var() — otomatis ikut theme! */ body { background: var(--bg); color: var(--teks); } .card { background: var(--card-bg); border: 1px solid var(--border); }
Toggle dark mode dengan JavaScript (2 baris saja!)
document.getElementById('toggle-mode').addEventListener('click', () => { // Cukup toggle satu attribute — semua ikut berubah! document.documentElement.dataset.tema = document.documentElement.dataset.tema === 'gelap' ? 'terang' : 'gelap'; });
--warnautama, --warnaUtama, dan --warna-utama adalah tiga variabel yang berbeda. Gunakan konvensi penamaan yang konsisten — mayoritas developer pilih kebab-case (huruf kecil dengan tanda hubung).--color-primary, --spacing-md, --font-size-lg. Lebih mudah dibaca dan dikelola./* === WARNA === */, /* === SPACING === */.calc()! Contoh: --multiplier: 1.5; lalu padding: calc(var(--multiplier) * 16px);. Ini teknik canggih untuk membuat sistem spacing yang fleksibel!
No comments:
Post a Comment