Selama bertahun-tahun CSS telah berkembang pesat dan salah satu yang akan kita bahas adalah, fitur yang lebih baru tetapi sangat kuat -> variabel CSS atau properti kustom. Variabel-variabel ini memungkinkan pengembang untuk menyimpan nilai yang digunakan kembali di tempat lain dalam stylesheet dan membuat peningkatan pemeliharaan, peningkatan, dan perluasan. Postingan ini akan menjadi pengantar untuk variabel css, kegunaannya, dan bagaimana Anda dapat menggunakannya untuk membuat stylesheet Anda tidak terlalu rumit.
Apa yang dimaksud dengan Variabel CSS?
Variabel CSS adalah entitas yang ditentukan pengguna yang menyimpan nilai tertentu, seperti warna atau dimensi dengan tipe yang sesuai untuk digunakan kembali di seluruh dokumen. Alasan mengapa variabel ini disebut: properti khusus, adalah karena Anda mendefinisikannya. Anda dapat mendeklarasikan variabel CSS dengan menggunakan dua tanda hubung yang mengawali namanya, seperti ini:
:root {
--primary-color: #3498db;
--font-size-large: 24px;
}
Mengapa Menggunakan Variabel CSS?
1. Pemeliharaan: Ini berarti variabel tersebut masih dapat dipertahankan jika variabel tersebut juga berubah, jika tidak, Anda harus menginterpolasi setiap instance kelas secara manual di dalam kode Anda. Ini berarti, misalnya, mengubah warna utama situs Anda semudah memperbarui variabel --primary-color dan semua contoh yang Anda gunakan akan diperbarui di seluruh situs web.2. Konsistensi: Variabel CSS mengubah nilai yang ada dengan cepat. Hal ini memaksa satu sumber kebenaran dalam nilai Anda, dan Anda tidak perlu lagi mengkhawatirkan perbedaan kecil antara warna, ukuran, atau bagaimana hal lain didefinisikan.3. Tema dinamis: Variabel CSS memungkinkan tema dinamis yang berarti situs web dapat dikonfigurasi untuk menggunakan tema yang berbeda hanya dengan mengubah nilai variabel;"> Hal ini memungkinkan proses pergantian tema yang lebih mudah dan efisien, dengan menghilangkan kebutuhan untuk menulis atau menyalin gaya beberapa kali.4. Mengurangi duplikasi kode: Variabel CSS dapat membantu membuat kode menjadi lebih kering karena Anda tidak perlu menentukan warna atau nilai lain lagi di tempat lain. Yang menghasilkan lembar gaya yang lebih bersih, lebih mudah dibaca, dan terstruktur.
.jpg)
Kasus Penggunaan Praktis
1. Manajemen Warna
Kasus penggunaan terkait warna yang paling umum untuk variabel CSS. Dengan cara ini Anda hanya perlu mendefinisikannya sekali saja, lalu alih-alih meng-coding warna di seluruh css Anda, rujuklah variabel-variabel tersebut ke tempat yang dibutuhkan:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
h1 {
color: var(--primary-color);
}
a {
color: var(--secondary-color);
}
Untuk memperbarui warna primer atau sekunder, cukup ubah variabel tersebut di dalam lingkup :root dan semua penggunaan variabel tersebut akan tertangkap.
2. Skala Tipografi
Mengontrol tipografiFitur 4 - Memanipulasi dimensi dalam situs web Anda menggunakan variabel CSS. Mendeklarasikan variabel ukuran huruf memungkinkan Anda memanipulasi ukuran teks dengan cepat di seluruh elemen:
:root {
--font-size-small: 12px;
--font-size-medium: 16px;
--font-size-large: 24px;
}
p {
font-size: var(--font-size-medium);
}
h1 {
font-size: var(--font-size-large);
}