Temu duga Frontend: Bagaimanakah CSS @functions Menggunakan Semula Token Reka Bentuk?

1. Gesaan dan skop

Satu sistem reka bentuk mempunyai token penjarakan, dan komponen mengira padding daripada ketumpatan dan lebar bekas. Pasukan ingin mengurangkan ungkapan calc() yang berulang sambil mengekalkan CSS biasa, penggantian tema dan tingkah laku pelayar lama. Reka bentuk penyelesaian dengan @function CSS dan jelaskan sandaran yang selamat.

2. Perkara yang diuji oleh penemu duga

Memahami bahawa @function mentakrifkan fungsi tersuai CSS yang namanya ialah dashed-ident bermula dengan --.
Mengisytiharkan parameter, nilai lalai, jenis pilihan dan result, sambil mengetahui badan fungsi tidak kembali seperti JavaScript pada pengisytiharan pertama.
Membezakan fungsi tersuai, custom property, fungsi masa bina Sass dan cascading masa larian.
Mengendalikan pengesanan ciri, pewarisan tema, kitaran, keserasian dan peningkatan progresif yang boleh diakses.

3. Soalan untuk dijelaskan terlebih dahulu

Pelayar sasaran manakah yang tidak mempunyai CSS Functions, dan adakah polyfill dibenarkan?
Adakah token merupakan panjang tetap, peratusan, atau nilai yang mungkin mengandungi calc() dan unit bekas?
Patutkah argumen yang tidak sah menggunakan nilai lalai, membatalkan pengisytiharan, atau menggunakan sandaran komponen?
Adakah tema mentakrifkan token pada :root, skop komponen, atau sempadan Shadow DOM?

4. Jawapan tiga puluh saat

Saya akan meletakkan padding statik yang berfungsi sebelum pengisytiharan dipertingkatkan, kemudian menggantikannya di dalam @supports. Fungsi ini menggunakan parameter bertaip dan berlalai serta mengembalikan panjang melalui result. Custom property membekalkan input tema; fungsi tersebut melakukan pengiraan. Pelayar yang tidak disokong akan mengabaikan fungsi yang tidak dikenali dan mengekalkan sandaran sebelumnya.

5. Penyelaman mendalam langkah demi langkah

Langkah 1: Tentukan parameter dan hasil

css

@function --space(--step <integer>: 2, --base <length>: 4px) {
  result: calc(var(--base) * var(--step));
}

Parameter adalah custom property tempatan dan boleh mengisytiharkan jenis CSS serta nilai lalai. result membekalkan nilai akhir; ia bukan return awal seperti JavaScript, jadi fungsi ini mematuhi peraturan pemprosesan pengisytiharan CSS.

Langkah 2: Sambungkan fungsi kepada token

css

:root {
  --space-base: 4px;
}

.card {
  padding: 16px;
  padding: --space(3, var(--space-base));
}

Pengisytiharan pertama ialah sandaran untuk pelayar lama; yang kedua diguna pakai apabila fungsi tersuai berjaya dihuraikan (parsed). Token masih melata (cascade) melalui custom property, jadi tema atau skop komponen boleh menggantikan --space-base.

Langkah 3: Kendalikan jenis dan nilai tidak sah

Kekangan jenis menolak nilai yang tidak sepadan dengan tatabahasa. Nilai lalai meliputi argumen yang ditinggalkan, bukan rentetan sewenang-wenangnya yang sepatutnya menjadi panjang. Uji nilai negatif, unit yang salah dan token yang hilang, dan jangan sekali-kali mencantumkan rentetan kawalan pengguna ke dalam argumen fungsi CSS.

Langkah 4: Fahami skop dan kebergantungan

Parameter fungsi bertindak sebagai custom property tempatan di dalam badan, manakala tapak panggilan masih mengikut lata, pewarisan dan susunan lapisan. Token yang digunakan oleh fungsi tidak boleh bergantung kembali kepada hasil fungsi; kitaran menjadikan pengisytiharan yang dikira tidak sah.

Langkah 5: Pengesanan ciri dan peningkatan progresif

css

.card {
  padding: 16px;
}

@supports (padding: --space(3, 4px)) {
  .card {
    padding: --space(3, var(--space-base, 4px));
  }
}

@supports menguji keupayaan penghuraian, bukan setiap cabang perniagaan. Kekalkan sandaran yang stabil, periksa reka letak yang dikira, dan pastikan pelayar yang tidak disokong masih mengekalkan teks yang boleh dibaca, penunjuk fokus dan saiz sasaran sentuh.

6. Model jawapan berkualiti tinggi

Saya akan menyediakan padding statik, kemudian mengira nilai yang dipertingkatkan dengan @function di dalam @supports. Custom property membawa nilai tema; parameter bertaip dan result melakukan pengiraan. Saya akan menguji argumen yang ditinggalkan, unit yang salah, nilai negatif dan kitaran. Oleh kerana sokongan masih berbeza-beza, sandaran mesti berdiri sendiri, dan semakan pelayar harus mengesahkan gaya yang dikira serta dimensi yang boleh diakses.

7. Kesilapan biasa

Menganggap CSS @function sebagai fungsi masa bina Sass → pelayar pengeluaran mengabaikannya → kekalkan sandaran masa larian dan kesan ciri.
Menghantar nombor tanpa unit kepada parameter <length> → pengisytiharan menjadi tidak sah → nyatakan jenis dan nilai lalai dengan jelas.
Menganggap fungsi mengubah suai custom property → penggantian tema gagal → asingkan input token daripada output result.
Menulis hanya @supports tanpa pengisytiharan asas → pelayar yang tidak disokong kehilangan penjarakan → tulis sandaran terlebih dahulu.
Menjadikan fungsi merujuk antara satu sama lain → kebergantungan berkitar membatalkan nilai → pastikan kebergantungan token adalah sehala.

8. Soalan susulan

Susulan 1: Bagaimanakah ia berbeza daripada custom property?

Custom property menyimpan nilai yang melata (cascading); fungsi tersuai menerima parameter dan mengira hasil. Fungsi ini boleh menggunakan semula logik pengiraan sambil membaca input token yang diwarisi.

Susulan 2: Bagaimanakah ia berbeza daripada fungsi Sass?

Fungsi Sass mengeluarkan CSS pada masa binaan dan tidak dapat memerhatikan tema masa larian atau keadaan bekas. Fungsi tersuai CSS berjalan semasa cascading dan pengiraan pelayar, jadi ia dinamik tetapi memerlukan pengendalian keserasian.

Susulan 3: Bagaimanakah anda mengesan sokongan?

Gunakan @supports (padding: --space(1, 4px)) untuk mengesan penghuraian, sambil mengekalkan sandaran sebelumnya. Ujian juga harus memeriksa nilai yang dikira dalam pelayar sebenar.

Susulan 4: Bagaimanakah anda mengelakkan kitaran?

Pastikan token asas bergantung pada nilai mentah, biarkan fungsi membaca token dan mengeluarkan nilai terbitan, serta larang token daripada merujuk sifat yang mengandungi hasil fungsi. Periksa nilai terhitung yang tidak sah dalam DevTools.