Apakah sifat kustom CSS (pembolehubah)?

Question

Accepted Answer

**Sifat kustom CSS** (pembolehubah) memungkinkan Anda menyimpan nilai sekali dan menggunakannya kembali. Berbeda dengan pembolehubah preprocessor (Sass), mereka **aktif saat runtime** — mereka berjenjang, diwarisi, dan dapat diubah dengan JavaScript atau kueri media.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Nilai fallback

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## Mereka berjenjang dan dapat disertakan/ditimpa

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Karena mereka diwarisi, pembolehubah yang diatur pada induk tersedia untuk semua keturunan dan dapat ditimpa pada subpohon — sesuatu yang pembolehubah Sass (yang dikompilasi) tidak dapat lakukan.

## Fitur pembunuh: tema runtime

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Tukarkan seluruh tema dengan mendefinisikan kembali segelintir pembolehubah — tidak ada aturan yang terduplikasi. Anda juga dapat melakukannya di JS:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

Ini segera memperbarui setiap elemen yang menggunakan pembolehubah tersebut — tidak mungkin dengan pembolehubah Sass yang dikompilasi.

## Mengapa hal ini penting

Pembolehubah CSS adalah fondasi **tema modern dan token desain**: tentukan warna/jarak sekali, gunakan kembali di mana-mana, dan tukarkan tema (mode gelap, varian merek) saat runtime melalui kueri media atau JavaScript.

Mereka membawa nilai DRY dan dinamis ke CSS polos — tidak diperlukan langkah build.