Bagaimana Anda Menyimpan Nilai Diwarisi dalam Pembolehubah CSS?

Menyimpan Nilai Warisan dalam Pembolehubah CSS

Dalam CSS, kita sering menghadapi keperluan untuk memanipulasi sifat berdasarkan nilai yang diwarisi, seperti mewarisi warna latar belakang elemen untuk unsur pseudonya. Walau bagaimanapun, menggunakan kata kunci warisan dalam pembolehubah CSS tidak selalu berfungsi seperti yang diharapkan.

Masalahnya

Pertimbangkan contoh mudah ini:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  /* Properties... */
}

.box:before {
  background: var(--color);
  /* Other properties... */
}

Dalam senario ini, kami menambah elemen pseudo (::before) pada elemen .box dan menetapkan sifat latar belakangnya untuk menggunakan pembolehubah CSS --color. Walau bagaimanapun, jika kita mahu elemen pseudo mewarisi warna latar belakang .box menggunakan kata kunci warisan, ia tidak akan berfungsi seperti yang diharapkan.

Penyelesaian

Untuk menyimpan nilai yang diwarisi dalam pembolehubah CSS, kita boleh menggunakan nilai sandaran harta itu. Nilai sandaran ditentukan sebagai hujah kedua kepada fungsi var(). Contohnya:

background: var(--color, inherit);

Dengan melakukan ini, kami memberitahu sifat latar belakang untuk menggunakan warisan sebagai nilai sandaran jika pembolehubah --color tidak ditakrifkan.

Walau bagaimanapun, dalam kes kami, ini tidak akan berfungsi kerana --color sentiasa ditakrifkan pada tahap :root. Untuk mengatasi isu ini, kami boleh menggunakan nilai awal untuk menyahtakrifkan sifat tersuai kami dan memaksa penggunaan nilai sandaran:

.box:before {
  background: var(--color, inherit);
  /* Other properties... */
}

/* Undefine --color using the initial value */
.box:before {
  --color: initial;
}

Nilai awal menetapkan pembolehubah CSS kepada nilai awalnya, yang merupakan kosong nilai. Apabila pembolehubah CSS mempunyai nilai awal, var() menganggapnya sebagai mempunyai nilai sandarannya.

Dengan menggunakan pendekatan ini, kita boleh menyimpan nilai yang diwarisi dalam pembolehubah CSS --color dan menggunakannya dengan berkesan untuk sifat latar belakang unsur pseudo.

Atas ialah kandungan terperinci Bagaimana Anda Menyimpan Nilai Diwarisi dalam Pembolehubah CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!