CSS VARIABLES

• disebut juga custom properties
• digunakan untuk menyimpan nilai yang bisa dipakai ulang

--main-color: blue;

cara menggunakan variabelnya

color: var(--main-color);

• gunakan :root untuk global variabel

penting karena

• theming (dark/light)
• konsistensi warna
• mudah maintenance
• mirip variabel di programming

Scope

variabel mengikuti scope CSS

.box {
  --color: red;
}

hanya berlaku di dalam .box

Fallback

color: var(--main-color, black);

jika variabel tidak ada maka pakai nilai kedua