Cara bermain Variabel Cat Tembok
- Baca instruksi level. Arena menampilkan
rumah.cssyang tidak bisa diubah, deretan kaleng (variabel di:root), dan rumahnya sendiri, dengan ruangan di dalam ruangan. - Tulis CSS-mu di editor. CSS-mu dimuat setelah
rumah.css, jadi kalau skornya seri, CSS-mu yang menang. Rumah langsung dicat ulang selagi kamu mengetik. - Di rumah ini
backgrounddanwidthhanya boleh diambil dari kaleng lewatvar(). Deklarasi tanpavar()dilewati, dan catatan di bawah editor menyebut apa yang dilewati. - Tiap ruangan memberi label asal catnya, mis.
--cat · :root(diwarisi dari:root),--cat · di sini(ditimpa di ruangan itu),cadangan gold, atau--cat-teras tidak ada, plus warna tujuan dan tanda ✓ atau ✗. - Tekan Cek jawaban atau Ctrl + Enter. Yang dicek warna dan lebar akhir tiap ruangan di browser, bukan teks CSS-mu.
- Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.
Yang kamu pelajari
- Level 1
Mendeklarasikan variabel
--cat: skybluedi:rootmembuat variabel yang bisa dipakai semua elemen di halaman. - Level 2
var()
var(--cat)mengambil isi variabel di tempat ia dipakai, mis.background: var(--cat). - Level 3
Satu sumber nilai
Mengganti satu variabel di
:rootmengubah semua elemen yang memakainya sekaligus. - Level 4
Nilai cadangan
var(--a, gold)memakaigoldkalau--atidak ada. Tanpa cadangan, deklarasinya tidak berlaku. - Level 5
Pewarisan
Variabel diwariskan ke semua keturunan, jadi deklarasi di
.lantai-atasberlaku untuk kamar di dalamnya. - Level 6
Menimpa di satu elemen
Deklarasi di elemen itu sendiri mengalahkan nilai warisan dari leluhur.
- Level 7
Cadangan bertingkat
Cadangan boleh berisi
var()lagi:var(--cat-luar, var(--cat)). - Level 8
var() di dalam variabel
--cat: var(--dasar)dihitung di elemen tempat ia dideklarasikan, lalu diwariskan sebagai nilai jadi. - Level 9
calc()
var()hanya menempelkan nilainya. Hitungan sepertivar(--modul) * 3harus dibungkuscalc(). - Level 10
Tema
Tema gelap cukup mengganti sekumpulan variabel di satu elemen pembungkus, mis.
.malam.
Variabel dihitung di tempat ia dideklarasikan
Misalkan :root { --dasar: wheat; --cat: var(--dasar); }. Browser menghitung --cat di :root, jadi isinya wheat, lalu nilai jadi itu yang diwariskan. Kalau kamar anak menulis --dasar: gold, dindingnya tetap wheat, karena --cat yang ia warisi sudah tidak berisi var(--dasar) lagi.
Supaya ikut berubah, --cat: var(--dasar) harus dideklarasikan ulang di elemen yang --dasar-nya berbeda. Pola ini sering muncul di design token: token dasar (--biru-500) dan token semantik (--warna-tombol) sebaiknya diubah di tempat yang sama, atau token semantiknya dideklarasikan di elemen tempat tema diganti.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Apa beda variabel CSS dengan variabel Sass?
Variabel Sass ($cat) diganti nilainya saat CSS dibuat, jadi di browser sudah tidak ada. Variabel CSS (--cat) hidup di browser: ikut cascade, diwariskan ke anak, bisa ditimpa per elemen atau per media query, dan bisa diubah lewat JavaScript. Karena itu tema gelap cukup mengganti variabelnya di satu tempat.
Kenapa dinding jadi polos, bukan memakai warna sebelumnya, saat var() salah?
Browser hanya memeriksa ada tidaknya var() saat membaca CSS. Nilainya baru dicek saat dihitung untuk elemen. Kalau ternyata variabelnya tidak ada atau isinya bukan warna, deklarasi itu dianggap unset, jadi background kembali ke nilai awal (transparan). Deklarasi lain yang kalah tidak dipakai sebagai gantinya.
Kapan nilai cadangan dipakai?
Hanya saat variabelnya tidak ada atau tidak valid (misalnya karena saling merujuk). Kalau variabelnya ada tapi isinya salah jenis, mis. --cat: 12px dipakai untuk background, cadangan tidak dipakai dan dindingnya tetap polos.
Selector dan properti apa saja yang dibaca?
:root, .kelas, kelas rapat seperti .rumah.malam, spasi untuk keturunan, dan daftar dengan koma. Propertinya --nama apa saja, background (atau background-color), dan width. Nilai yang dikenal: warna wheat, skyblue, seagreen, gold, tomato, orchid, navy, white, gray, angka dengan px, var(), dan calc().
Bagaimana jawaban dicek?
Rumahnya dirender sungguhan di pratinjau terpisah dengan CSS-mu, lalu warna dan lebar tiap ruangan dibaca dengan getComputedStyle. Label asal cat dihitung oleh model kecil yang mengikuti aturan yang sama, jadi jawaban yang berbeda bisa sama-sama benar.