Membuat Variabel Pada CSS

Halo sahabat Iltekkomputer, pada kesempatan kali ini saya ingin memberikan sebuah trik tentang CSS3 yang sangat berguna untuk kedepannya pada website anda. Sebagai programmer web pasti kita tidak asing dengan istilah CSS, kan? Pada setiap bahasa pemrograman biasanya terdapat variabel untuk menampung nilai tertentu supaya bisa digunakan secara berulang-ulang. Tapi tau gak sih kalau CSS juga memiliki fitur variabel, padahal CSS bukan termasuk bahasa pemrograman.

Mengenal CSS Variabel

Jika anda menggunakan CSS processor seperti SASS pasti anda akan merasa terbantu dengan adanya fitur CSS variabel. Karena kita dapat mendefinisikan terlebih dahulu nilai-nilai yang akan sering dipakai kedalam variabel. Lalu menggunakan variabel tersebut pada style yang anda buat

Nama resminya adalah CSS Custom Properties, karena cara pendeklarasiannya lebih mirip deklarasi properti biasa. Hanya saja nama propertynya kita yang atur.

Seperti halnya variabel pada CSS Preprocessor, kita bisa mendeklarasikan variabel-variabel yang akan sering kita gunakan pada website kita.

Membuat Variabel Pada CSS

Mendeklarasikan Variabel

Variabel CSS adalah nilai tersimpan yang ditujukan untuk digunakan kembali melalui stylesheet. Mereka bisa diakses menggunakan fungsi var() dan mengaturnya menggunakan properti kostum.

:root{
    --primary-color: #379EE3;
    --button-color: #3287C0;
}

Fungsi :root diatas digunakan supaya variabel bisa di akses secara global.

Cara Menggunakan Variabel

Seperti yang sudah saya bahas di atas, kita akan menggunakan function var() untuk menggunakan variabel, contohnya seperti ini:

:root{
    --primary-color: #379EE3;
    --button-color: #3287c0;
}

.container{
    background-color: var(--primary-color);
}
.button{
    background-color: var(--button-color);
}

Fungsi var() juga bisa menerima nilai fallback, contohnya seperti di bawah ini:

.container {
    background-color: var(--primary-color, skyblue);
}

Pada kode diatas ini akan berguna disaat sebuah variabel belum di deklarasikan maka nilai selanjutnya yang akan di gantikan yaitu skyblue. Jika fallback tidak di berikan dan variabel belum di deklarasikan maka nilainya adalah transparent.

Contoh Demo

Pada contoh demo variabel CSS ini, menggunakan rentang input untuk memodifikasi tiap property transform.

See the Pen
CSS Variable Demo by Iltekkomputer (@iltekkomputer)
on CodePen.

Manfaat dari Variabel CSS

Dengan adanya Variabel CSS maka style dalam website kita bisa lebih dinamis.

Misalkan anda membuat sebuah template untuk web, dan anda menyediakan fitur customizer untuk mengubah warna utama yang digunakan. Anda tinggal merubah value CSS dari variabel tanpa harus membuat file khusus atau mengedit souce CSS.

Kekurangan dari Variabel CSS

Karena variabel CSS adalah properti warisan, mereka bisa menyebabkan style recalculation dari anak yang berdampak buruk pada peforma dari prosesnya. Ini akan menjadi sesuatu yang perlu anda timbangkan.