Mengapakah Sifat Tersuai CSS Skop Saya Diabaikan Apabila Digunakan dalam Pengiraan Skop Luar?

Sifat Tersuai Berskop CSS Diabaikan Apabila Digunakan untuk Mengira Pembolehubah dalam Skop Luar

Apabila cuba mencipta CSS yang boleh digubah dan berganding longgar, adalah penting untuk memahami skop sifat tersuai. Dalam senario tertentu, perubahan yang dibuat pada sifat tersuai berskop dalam elemen anak mungkin tidak menjejaskan elemen induk seperti yang dijangkakan.

Satu senario sedemikian berlaku apabila sifat tersuai digunakan untuk mengira pembolehubah dalam skop luar. Isu timbul apabila sifat tersuai ditakrifkan semula dalam elemen anak, menyebabkan penilaian awal daripada elemen induk diabaikan.

Untuk menggambarkan perkara ini, pertimbangkan contoh berikut:

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

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

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

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

ol {
  font: 1em sans-serif;
}

.size-1 {
  font-size: var(--size-1);
}

.size-2 {
  font-size: var(--size-2);
}

.size-3 {
  font-size: var(--size-3);
}

Dalam contoh ini, sifat --size-* dikira pada tahap akar menggunakan sifat tersuai skala -. Walau bagaimanapun, dalam kelas .scale-*, sifat --scale ditakrifkan semula. Ini menyebabkan nilai warisan --scale daripada elemen akar diabaikan, menyebabkan sifat --size-* dikira menggunakan nilai lalai --scale: 1.

Untuk mengelakkan isu ini, adalah penting untuk menentukan sifat tersuai pada tahap yang sesuai dan elakkan mentakrifkannya semula dalam elemen anak. Ini memastikan sifat tersuai berskop boleh digunakan dengan berkesan untuk mengira pembolehubah dalam skop luar dan mencapai CSS yang boleh digubah dan berganding longgar.

Atas ialah kandungan terperinci Mengapakah Sifat Tersuai CSS Skop Saya Diabaikan Apabila Digunakan dalam Pengiraan Skop Luar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!