Cara Menggunakan CSS Variables (Custom Properties) Secara Global

Wadah Penyimpanan Rahasia di Dalam CSS

Sebelum CSS berevolusi, jika Client memintamu mengubah warna merah (Brand perusahaan) di website mereka menjadi warna biru, kamu akan menangis. Kamu harus membuka file style.css, lalu menekan Ctrl+F (Find and Replace) untuk mengganti ratusan tulisan kode #FF0000 menjadi #0000FF. Ini sangat berisiko merusak kode lain.

Sekarang, CSS memiliki kekuatan super layaknya bahasa pemrograman sungguhan: CSS Variables (Custom Properties).

Cara Mendeklarasikan Variabel (Wajib Pakai --)

Untuk membuat CSS Variables bisa digunakan di seluruh penjuru website (Global), kita tidak meletakkannya di dalam tag body, melainkan di dalam pseudo-class khusus bernama :root (yang merupakan elemen paling tinggi, bahkan di atas elemen ).

Aturan penulisannya: Nama variabel WAJIB diawali dengan dua buah tanda hubung (dash/strip).

:root {
  --warna-utama: #3498db;       /* Biru Terang */
  --warna-teks: #333333;        /* Abu-abu Gelap */
  --font-judul: 'Arial', sans-serif;
  --jarak-standar: 16px;
}

Cara Menggunakan Variabel (Fungsi var)

Setelah wadah variabelnya terisi, kamu bisa menggunakannya (memanggilnya) di sembarang tempat menggunakan fungsi pembungkus var().

.tombol-beli {
  background-color: var(--warna-utama);
  padding: var(--jarak-standar);
  font-family: var(--font-judul);
}

.judul-artikel {
  color: var(--warna-utama); /* Memakai warna biru yang sama! */
}

Mengapa Ini Lebih Sakti Daripada SASS Variables?

Mungkin kamu berpikir: "Ah, SCSS/SASS juga punya fitur Variabel ($warna: blue). Apa bedanya?"

Perbedaannya bagaikan langit dan bumi! Variabel SASS adalah Variabel Mati (Static). Saat SASS di-*compile* menjadi CSS mentah untuk browser, semua variabelnya musnah berubah jadi kode warna *hex* biasa.

CSS Variables adalah Variabel Hidup (Dynamic) di DOM Browser. Artinya, Kamu bisa memanipulasinya secara langsung menggunakan JavaScript!

Keajaiban Integrasi dengan JavaScript

Jika kamu ingin membuat fitur di mana pengunjung bisa mengubah ukuran teks secara dinamis pakai tombol Slider di layar, JavaScript bisa langsung mengubah nilai variabel akarnya, dan BOOM, seluruh halaman web-mu akan bereaksi detik itu juga!

// Menyuruh JavaScript mengubah isi CSS Variable "--warna-utama"
document.documentElement.style.setProperty('--warna-utama', '#e74c3c'); // Berubah jadi merah!