Setelah belajar CSS Media Query pada seri belajar css bagian 9, dalam artikel ini kami akan membahas tentang cara menggunakan CSS variables pada website.
Lalu, apa itu CSS variables, fungsi dan bagaimana cara menggunakannya? Simak artikel berikut ini untuk belajar CSS variables hingga penggunaannya.
Apa itu CSS Variables?
CSS Variables adalah fitur dalam CSS yang memungkinkan Anda menyimpan nilai tertentu dalam sebuah variabel. Dengan menggunakan variabel ini, Anda cukup mendefinisikan nilai satu kali dan menggunakan berulang kali di berbagai tempat dalam skrip CSS.
Contohnya, Anda mendefinisikan nilai berupa warna, ukuran font, atau nilai property lain pada CSS. Dengan definisi variabel, Anda dapat memanggil variabel tersebut berulang kali pada website Anda.
CSS variables memberikan fleksibilitas bagi developer dalam menulis kode secara efisien, serta memudahkan pengelolaan nilai atau elemen lain secara dinamis. Dengan CSS variables, Anda tidak perlu mengulangi penulisan kode yang sama, baik saat membangun tampilan website maupun saat melakukan perbaikan.
Manfaat menggunakan CSS Variables
Penerapan CSS variables membuat penulisan kode lebih efisien dan memudahkan pengelolaan properti CSS, seperti warna. Misalnya, lebih mudah menggunakan variabel bernama --warna-merah
daripada menggunakan kode heksadesimal #ff0000
.
Selain warna, ukuran font dan hampir semua nilai properti CSS dapat menggunakan variabel. Berikut beberapa manfaat menggunakan CSS variables:
1. Penulisan kode lebih efisien
Penulisan nilai properti yang berulang akan memerlukan waktu lebih banyak, sedangkan menggunakan CSS Variable memungkinkan untuk menggunakan hanya sekali penggunaan saja, dan akan diterapkan ke semua properti yang menggunakan variables tersebut sehingga perubahan yang dilakukan akan menghemat waktu.
2. Fleksibilitas dalam kustomisasi value
Penggunaan CSS variables akan mempermudah melakukan kustomisasi value, Anda dapat melakukan kustomisasi sesuai dengan kebutuhan website Anda. Contohnya seperti fitur mode gelap (dark mode) atau mode terang (light mode).
3. Struktur kode CSS mudah di pahami
Anda tidak perlu menghafal kode heksa penulisan warna, menulis ukuran padding dan margin, ukuran font, dll. Menggunakan css variable dapat mengimplementasikan penulisan kode heksa menjadi sebuah nama yang mudah di ingat contohnya seperti nama variables –warna-merah akan lebih mudah di baca dari pada menggunakan kode heksadesimal #ff0000
4. Mudah ketika maintenance
Kode yang mudah dibaca akan lebih mudah dalam melakukan maintenance dalam satu tim, sehingga Anda tidak perlu menjelaskan kembali mengenai alur script kode yang Anda buat ke tim Anda.
Penulisan kode CSS Variables
Penulisan CSS Variables diawali dengan tanda penghubung / kurang (–). Berikut adalah contoh penulisan kode CSS Variables :
var( --nama-kustom, nilai );
Dari penulisan kode diatas, Fungsi var() dapat digunakan untuk mengambil nilai variables dalam CSS. Parameter variable var() mencangkup 2 parameter, yaitu :
- –custom-name nama properti custom yang akan digunakan di awali dengan 2 tanda kurang (–) dan besar kecil nama (case sensitive).
- nilai (opsional) akan memberikan nilai jika nama properti custom tidak valid
Deklarasi CSS Variable
Secara umum, penulisan CSS Variables dapat mencangkup variables secara global dan variables lokal. Mari kita bahas satu persatu.
1. Variables Global
Mendeklarasikan variables global yang dapat diakses/digunakan melalui keseluruhan dokumen halaman website. Untuk membuat variables global, kita dapat mendeklarasikan variables global di dalam selector :root.
Berikut contoh penulisan kode CSS Variables secara global.
:root {
--warna-biru: #0000ff;
--warna-orange: #ffa500;
}
Dari kode diatas, maka dapat menggunakan variables –warna-biru dan –warna-merah diseluruh dokumen halaman website.
2. Variables Lokal
Mendeklarasikan variables lokal hanya dapat digunakan di dalam selector ketika variables dideklarasikan sesuai dengan selector yang akan kita tentukan. Berikut contoh penulisan kode CSS Variables secara lokal.
.container {
--warna-merah: #ff0000;
}
h1 {
color: var(--warna-merah); /*memanggil css variables local*/
}
Dari kode diatas, maka hanya dapat menggunakan variables –warna-abu-muda di dalam selector container.
Cara Menggunakan CSS Variables
Setelah mendeklarasikan CSS Variables, berikut contoh kode css untuk memanggil CSS Variables yang telah dideklarasikan.
:root {
--warna-biru: #0000ff;
--warna-orange: #ffa500;
}
.container {
--warna-merah: #ff0000;
}
h1 {
color: var(--warna-merah); /*memanggil css variables local*/
}
h2 {
color: var(--warna-biru); /*memanggil css variables global*/
}
button {
background-color: var(--warna-orange); /*memanggil css variables global*/
color: var(--warna-biru); /*memanggil css variables global*/
}
Dari kode di atas untuk :root adalah mendeklarasikan css variables global, sedangkan pada pada selector dengan nama “container” mendeklarasikan css variables lokal di dalam class container.
Contoh Script CSS Variable
Setelah memahami mengenai manfaat, penulisan kode, dan mendeklarasikan CSS Variable, berikut adalah contoh script CSS variables yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--warna-biru: #0000ff;
--warna-orange: #ffa500;
}
.container {
--warna-merah: #ff0000;
}
h1 {
color: var(--warna-merah); /*memanggil css variables local*/
}
h2 {
color: var(--warna-biru); /*memanggil css variables global*/
}
button {
background-color: var(--warna-orange); /*memanggil css variables global*/
color: var(--warna-biru); /*memanggil css variables global*/
}
</style>
</head>
<body>
<div class="container">
<h1>Teks ini berada didalam class "container" dan menggunakan css variabel lokal</h1>
</div>
<button>Ini Tombol menggunakan css variabel global</button>
<h1>Teks ini berada diluar class "container" dan menggunakan css variabel local</h1>
<h2>Teks ini berada diluar class "container" dan menggunakan css variabel global</h2>
</body>
</html>
Jika di testing menggunakan browser akan menampilkan screenshot sebagai berikut :
Kesimpulan
CSS Variables, juga dikenal sebagai custom properties, adalah fitur yang membuat penulisan kode CSS lebih fleksibel dan efisien. Fungsinya adalah untuk menyimpan nilai properti CSS, sehingga dapat digunakan kembali.
Fitur ini memudahkan developer dalam mengelola properti dan elemen lain secara dinamis tanpa harus menulis ulang kode yang sama, baik saat membangun tampilan website maupun saat melakukan perbaikan.
Demikian seri belajar CSS bagian 10 yang membahas tentang CSS variable. Selanjutnya, Anda dapat belajar CSS Grid Layout untuk menambah wawasan Anda tentang CSS. Semoga bermanfaat.