Halo teman-teman semuanya, setelah sebelumnya kita belajar cara membuat animasi dengan CSS Transition & Animation, sekarang kita akan membahas fitur modern dan sangat berguna dalam CSS: CSS Variables.
Dengan CSS Variables, kita bisa menyimpan nilai CSS seperti warna, ukuran, dan font di satu tempat, lalu menggunakannya kembali di banyak tempat lainnya. Ini membuat kode kita lebih rapi, lebih mudah diubah, dan lebih konsisten.
Apa Itu CSS Variable?
CSS Variable (disebut juga Custom Property) adalah cara menyimpan nilai dalam CSS yang bisa dipakai berulang-ulang.
Sintaks:
:root {
--nama-variable: nilai;
}
Untuk menggunakannya:
selector {
property: var(--nama-variable);
}
Contoh Dasar
:root {
--warna-utama: #3498db;
--padding-standar: 16px;
}
.button {
background-color: var(--warna-utama);
padding: var(--padding-standar);
}
Penjelasan:
- Kita mendefinisikan variabel
--warna-utama dan --padding-standar di :root, agar bisa digunakan di seluruh halaman.
- Properti
var(--nama-variable) akan diganti nilainya saat dijalankan oleh browser.
Kenapa Menggunakan CSS Variable?
- Mudah diubah
Cukup ubah di satu tempat (
:root), maka semua komponen yang memakai variable akan ikut berubah.
- Kode lebih rapi dan konsisten
Tidak ada lagi duplikasi warna/font/ukuran di berbagai tempat.
- Mendukung fallback value
Kita bisa memberi nilai cadangan jika variable tidak tersedia.
Variable Bersifat Scoped
Kita bisa mendefinisikan variable dalam elemen tertentu:
.card {
--warna-utama: green;
}
Jika kita menggunakan var(--warna-utama) di dalam .card, maka nilai yang dipakai adalah green. Di luar .card, akan tetap pakai nilai dari :root.
Contoh Lengkap
Contoh berikut menunjukkan bagaimana CSS Variables bisa digunakan untuk mengatur tema dengan mudah.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>CSS Variables</title>
<style>
:root {
--warna-utama: #2ecc71;
--warna-teks: #ffffff;
--font-utama: 'Segoe UI', sans-serif;
--padding-besar: 24px;
}
body {
font-family: var(--font-utama);
background-color: #f4f4f4;
padding: var(--padding-besar);
}
.button {
background-color: var(--warna-utama);
color: var(--warna-teks);
border: none;
padding: 12px 20px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
}
.card {
background-color: var(--warna-utama);
padding: var(--padding-besar);
color: var(--warna-teks);
border-radius: 8px;
margin-top: 20px;
}
</style>
</head>
<body>
<button class="button">Tombol</button>
<div class="card">
<h2>Kartu Info</h2>
<p>Ini adalah contoh penggunaan CSS Variables untuk mengatur warna dan ukuran secara konsisten.</p>
</div>
</body>
</html>
Variabel seperti --warna-utama dan --padding-besar disimpan di :root, lalu digunakan di berbagai elemen seperti .button dan .card. Kita bisa mengubah warna tema seluruh website hanya dengan mengganti satu baris CSS.
Kesimpulan
CSS Variables memberikan fleksibilitas dan efisiensi dalam penulisan kode CSS. Dengan mendeklarasikan nilai-nilai penting dalam bentuk variabel, kita bisa menjaga konsistensi desain, mengurangi duplikasi, dan mempercepat proses perubahan gaya saat dibutuhkan.
Terima Kasih