Mungkin merupakan pengetahuan baru dalam dunia website atau mungkin saja tidak. yah, akhirnya penggunaan variabel juga hadir dalam css. Jika kamu lebih familiar dengan struktur css sederhana seperti Less atau SASS, mungkin kamu akan mudah memahami dasar yang diharapkan dari pengembangan ini. Ini mungkin akan mempermudah kita dalam membuat barisan code css. Variabel ini akan menhadi sebuah kumpulan styling yang akan dengan mudah bisa direfrensikan.
Css Variable
Mendeklarasikan Variabel
Variabel dalam CSS ditentukan dengan awlan var-*, seperti berikut :
Baca Juga :
var-primary-color: #333;
Pada contoh kode di atas, kita membuat sebuah variabel bernama CSS primary-color . Namun, tidak seperti di CSS Pre-prosesor, di mana kita bisa mendeklarasikan variabel independen, variabel dalam CSS harus bersarang di bawah CSS selector.
Sebagai contohnya :
html {
var-primary-color: #333;
}
Selain itu, ketika memulai untuk sebuah penamaan variabel, disarankan untuk mengikuti konvensi penamaan bahasa.
Dalam kasus CSS, kita menggunakan dash (-) untuk memisahkan kata-kata dalam nama properti. Dalam JavaScript, huruf besar yang digunakan untuk memulai setiap kata misalnya seperti variableNamaSepertIni.
Melewati variabel
Sekarang, pertanyaannya adalah bagaimana kita menerapkan variabel dalam aturan CSS? Kita bisa menerapkan variabel dengan metode CSS var() baru . Katakanlah kita ingin menerapkan warna dasar pada tag body, kita dapat menulis dengan cara seperti berikut:
html {
var-primary-color: #333;
}
body {
background-color: var(primary-color);
}
Perlu dicatat bahwa Chrome adalah satu-satunya browser yang saat ini bereksperimen untu bisa melakukan fitur ini, dan awalan -webkit- diperlukan untu kita agar bisa melihat hasilnya. Jadi, pada saat ini adalah bagaimana kita benar-benar harus menulis aturan CSS.
html {
-webkit-var-primary-color: #333;
}
body {
background-color: -webkit-var(primary-color);
}
Scop/Cakupan
Jika kamu seorang JavaScript coder, kamu harus sudah akrab dengan konsep Scop. hal ini juga sangat berlaku untuk CSS variabel. Nilai akan diterapkan hanya pada unsur-unsur di mana ia bersarang. Mengingat contoh kita sebelumnya, kita bisa terapkan pada semua unsur seperti yang kita nyatakan sepenuhnya di bawah elemen html.
Katakan saja berada dibawah kumpulan tag div, seperti :
div {
-webkit-var-primary-color: #333;
}
Tentu saja, variabel ini hanya dapat diterapkan dalam <div>.
Tanpa diragukan, Variabel akan menjadi tambahan yang bagus untuk CSS. Namun, pada saat ini, hal ini hanya bekerja di Chrome. Jadi, sampai W3C memberi status rekomendasi untuk modul ini, menggunakan CSS-Preprocessor adalah satu-satunya pilihan yang layak untuk menggunakan variabel dalam CSS.
lihat pada demo kalau browsermu mendukung, kamu harus melihat efeknya.
via hongkiat.
