CSS Functions Calc Color Mix
Ringkasan
CSS punya fungsi bawaan untuk komputasi nilai: calc() (matematika), color-mix() (campur warna).
Konsep Dasar
calc(100% - 4rem)— campur unit berbeda.calc()bisa nested & pakai var:calc(var(--x) * 2).color-mix(in srgb, red 30%, blue)— blend 30% red + 70% blue.min()/max()/clamp()(lihat post fluid).rgb(),hsl(),oklch()untuk warna modern.
Cara Kerja / Struktur
css.sidebar { width: calc(100% - var(--nav-w)); }
.btn { background: color-mix(in srgb, var(--brand) 80%, white); }
:root { --brand: oklch(0.7 0.15 250); }Catatan Implementasi
calc()wajib spasi di sekitar+/-(calc(100%-4rem)salah).oklch()lebih baik untuk percepatan warna (perceptual);color-mixmudah buat varian.- Kombinasikan
var()+calc()untuk layout adaptif.
Kesalahan Umum
calc(100%-4rem)tanpa spasi → invalid.color-mixbutuh browser modern (2023+).
Glosarium
- color-mix: campur dua warna dengan persentase.
- oklch: model warna perceptually uniform.