Online Web Tutorial

Mengenal Variable di CSS3

Mengenal Variable di CSS3

FSodic.ID - Halo para jomblo, pie? Masih tetap nebeng wifi tetangga? Atau masih seneng tethering dari hp  temen? Inget sekali lagi, tau diri woy jangan youtubean Kali ini kita bakal bahas salah satu dari CSS3. Yap variable. Nah situs-situs besar biasanya memiliki properti yang cukup banyak yang mungkin salah satunya menggunakan properti yang sama berulang-ulang. Seperti color: #e91e63; atau background: #e91e63; yang mana #e91e63 merupakan warna utama dari situs tersebut. Yang mungkin bisa merupakan warna dari link default, background header, ataupun backgroud dari button.

Nah variable ini bisa menjadi solusi ketika seorang developer mulai merancang tampilan dari situsnya, daripada harus mengingat ataupun scroll keatas css variable dapat dimanfaatkan untuk membuat nilai properti yang sama tanpa harus terus-terusan menulisnya berulang. Secara umum, untuk mendeklarasi variable adalah:

element { --nama-variable: nilai; }

Dan untuk menggunakannya bisa dengan:

element { property: var(--nama-variable); }

Sebagai contoh:

html {
  --primary-color: #e91e63;
}
a {
  color: var(--primary-color);
}

Variable ini akan sedikit kurang efisien ketika kalian hanya memiliki css yang kecil, dimana kalian jarang menggunakan code tersebut.

Untuk contoh Demonya:

___

Oke mblo, cukup sekian dari saya kali ini, jangan lupa matikan rethering kalo yang punya udah mulai bergelagat aneh ya sampai jumpa dilain kesempatan.