Mengapakah Sifat Tersuai CSS Scoped Kadangkala Gagal Lata Dengan Betul untuk Pengiraan?

Warisan Harta Tersuai Skop dalam CSS

Apabila mentakrifkan sifat tersuai dalam CSS, skop memainkan peranan penting dalam pewarisan dan penggunaannya. Walau bagaimanapun, anda mungkin menghadapi situasi di mana sifat tersuai berskop diabaikan apabila digunakan untuk mengira pembolehubah dalam skop luar. Ini boleh berlaku apabila sifat tersuai ditakrifkan semula dalam elemen anak, yang membawa kepada hasil yang tidak dijangka.

Penjelasan Skop

Sifat tersuai ditakrifkan menggunakan -- awalan dan boleh diskop kepada elemen atau subpokok tertentu menggunakan kata kunci :root atau :host. Sifat berskop hanya boleh diakses dalam elemen atau keturunannya, membenarkan pengkapsulan dan pewarisan terkawal.

Isu dengan Sifat dan Pengiraan Skop

Dalam contoh anda, anda telah menentukan sifat tersuai berskop --skala dalam pemilih :root untuk mengira nilai --size-1, --saiz-2, dan --saiz-3. Walau bagaimanapun, dalam elemen anak (.scale-1x, .scale-2x dan .scale-3x), anda telah mentakrifkan semula --scale. Ini menimbulkan isu kerana CSS menilai sifat tersuai dengan cara dari atas ke bawah. Setelah sifat tersuai dinilai pada tahap tertentu, sifat tersebut tidak boleh ditindih atau diubah dalam elemen bersarang.

Teknik Harta Tersuai CSS untuk Penskalaan Boleh Gubah

Untuk mencapai yang diingini kesan senarai skala pada tahap yang berbeza tanpa gandingan, anda boleh menggunakan yang berikut teknik:

:root {
  --size-1: calc(1rem * var(--scale, 1));
  --size-2: calc(2rem * var(--scale, 1));
  --size-3: calc(3rem * var(--scale, 1));
}

.size-1, .size-2, .size-3 {
  font-size: var(--scale, 1rem);
}

.scale-1x {
  --scale: 1;
}
.scale-2x {
  --scale: 2;
}
.scale-3x {
  --scale: 3;
}

Dalam pendekatan ini, sifat --skala kekal berskop ke peringkat :root. Walau bagaimanapun, daripada menggunakannya secara langsung untuk mengira saiz fon, kami menggunakannya dalam fungsi var() di dalam kelas .size-1, .size-2 dan .size-3. Ini membolehkan saiz fon mewarisi nilai --scale jika ia ditetapkan dalam skop luar. Jika --scale tidak disediakan, ia akan kembali kepada nilai lalai 1rem.

Dengan teknik ini, anda boleh mengarang kesan penskalaan tanpa menggabungkan elemen. Anda boleh menggunakan kelas .scale-1x, .scale-2x dan .scale-3x pada elemen senarai atau kumpulan yang berbeza untuk mencapai variasi skala yang diingini.

Atas ialah kandungan terperinci Mengapakah Sifat Tersuai CSS Scoped Kadangkala Gagal Lata Dengan Betul untuk Pengiraan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!