CSS 10B: Variabel dan Fungsi CSS yang Berguna

Custom properties, sering disebut variabel CSS, menyimpan nilai yang dapat digunakan kembali. Fungsi CSS membantu menghitung dan membatasi ukuran secara fleksibel.

1. Demo Variabel dan Fungsi CSS

2. Membuat dan Menggunakan Variabel

Nama custom property diawali -- dan digunakan dengan var(). Variabel pada :root tersedia secara global. Variabel --warna-aksen pada kartu mempunyai scope lokal dan dapat ditimpa oleh .kartu-peringatan.

var(--warna-label, #475569) memiliki fallback yang dipakai jika --warna-label tidak ditemukan.

3. Fungsi Ukuran

• calc(45vh - 32px) menggabungkan satuan dan operasi hitung.
• min(100% - 32px, 900px) memilih nilai terkecil.
• max(240px, 25%) dapat menjaga lebar minimum.
• clamp(2rem, 6vw, 4rem) menjaga ukuran antara batas minimum dan maksimum.

Berikan spasi di sekitar operator pengurangan di dalam calc().

Kesalahan yang Sering Terjadi

• Menulis nama variabel tanpa awalan --.
• Lupa membungkus penggunaan variabel dengan var().
• Membuat terlalu banyak variabel untuk nilai yang hanya digunakan sekali.
• Menggunakan clamp() tanpa batas yang masuk akal.

Latihan

Ubah --warna-utama dan --radius di :root. Buat kartu ketiga dengan variabel aksen ungu, lalu ubah batas minimum dan maksimum judul.

Ringkasan

Custom properties menyimpan nilai yang dapat digunakan kembali. calc() menghitung nilai, min() dan max() memilih batas, sedangkan clamp() menjaga nilai di antara minimum dan maksimum.