Cara Menggunakan CSS Variable (Custom Properties)

CSS Variable, atau yang secara resmi disebut CSS Custom Properties, adalah fitur CSS modern yang memungkinkan kamu menyimpan nilai tertentu di dalam variabel dan menggunakannya berulang kali di seluruh stylesheet. Fitur ini membuat kode CSS lebih mudah dikelola, konsisten, dan mendukung fitur seperti theming dan dark mode. Artikel ini akan membahas cara menggunakannya dari dasar.

Apa Itu CSS Variable?

CSS Variable adalah nilai yang kamu definisikan sekali dan bisa digunakan berulang kali. Jika kamu ingin mengubah warna utama website, cukup ubah satu nilai saja — semua elemen yang menggunakan variabel tersebut akan ikut berubah secara otomatis.

Cara Mendefinisikan CSS Variable

CSS Variable didefinisikan dengan diawali dua tanda hubung (--). Biasanya ditempatkan di dalam selektor :root agar tersedia secara global:

:root {
  --warna-utama: #3b82f6;
  --warna-sekunder: #10b981;
  --warna-teks: #1e293b;
  --warna-latar: #f8fafc;
  --ukuran-font-dasar: 16px;
  --radius-border: 8px;
  --bayangan: 0 2px 8px rgba(0, 0, 0, 0.1);
}

---

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Menggunakan CSS Variable (Custom Properties)

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.