- Apa Itu CSS Variable?
- Contoh Dasar
- Kenapa Menggunakan CSS Variable?
- Variable Bersifat Scoped
- Contoh Lengkap
- Kesimpulan
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-utamadan--padding-standardi: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-utamadan--padding-besardisimpan di:root, lalu digunakan di berbagai elemen seperti.buttondan.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
Artikel ini dibaca sebanyak 1.778 kali
SAWERIA
Memuat komentar...