Variabel CSS (Custom Properties) & calc()

Masalah nilai berulang

Bayangkan warna utama website kamu #3c5a44 dipakai di 40 tempat. Lalu klien ingin menggantinya. Kamu harus mengubah 40 baris, dan satu yang terlewat membuat tampilan tidak konsisten. Variabel CSS menyelesaikannya: tulis sekali, pakai di mana saja.

Membuat dan memakai variabel

:root {
  --warna-utama: #3c5a44;
  --warna-aksen: #cf9d3d;
  --jarak: 16px;
  --radius: 12px;
}

.tombol {
  background: var(--warna-utama);
  padding: var(--jarak);
  border-radius: var(--radius);
}

• Nama variabel diawali dua tanda hubung --.
• Dipakai dengan fungsi var(--nama).
• :root adalah elemen paling atas (html), sehingga variabel di sana berlaku di seluruh halaman.
• Variabel bersifat case-sensitive: --Warna berbeda dari --warna.

Nilai cadangan (fallback)

color: var(--warna-teks, #333);   /* kalau --warna-teks tidak ada, pakai #333 */

Variabel bisa ditimpa di lingkup tertentu

Variabel mengikuti aturan pewarisan. Kamu bisa mengubah nilainya di bagian tertentu sehingga semua anak ikut berubah:

.tema-gelap {
  --latar: #1b1f1a;
  --teks: #f6f2e9;
}
.kartu {
  background: var(--latar);
  color: var(--teks);
}

Inilah dasar membuat mode gelap/terang: cukup mengganti nilai variabel, bukan menulis ulang semua aturan.

calc(): hitung di CSS

calc() mengizinkan operasi + - * / dengan satuan berbeda. Tanda + dan - wajib dikelilingi spasi.

.konten { width: calc(100% - 40px); }
.judul  { font-size: calc(1rem + 1vw); }
.item   { margin: calc(var(--jarak) * 2); }

min(), max(), clamp()

clamp() sangat berguna untuk teks yang membesar mengikuti layar tapi tidak pernah terlalu kecil atau terlalu besar, tanpa media query.