Bagaimana untuk Mewarisi Nilai Menggunakan Pembolehubah CSS dengan Fallback?

Cara mewarisi nilai dalam pembolehubah CSS

Pembolehubah CSS, juga dikenali sebagai sifat tersuai, membolehkan kami menyimpan dan memanipulasi nilai dengan cara yang boleh digunakan semula di seluruh lembaran gaya. Walau bagaimanapun, satu had pembolehubah CSS ialah mereka tidak boleh mewarisi nilai daripada elemen induknya.

Masalah

Sebagai contoh, pertimbangkan kod berikut:

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

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

Dalam kod ini, kita mempunyai peraturan :root yang mentakrifkan pembolehubah --color dengan nilai lalai rgba(20, 20, 20, 0.5). Kami juga mempunyai kelas .box yang menetapkan beberapa gaya untuk elemen segi empat tepat dan :before unsur pseudo yang mencipta elemen bulat di dalam kotak.

Sifat latar belakang :before elemen pseudo ditetapkan kepada var(--color), yang bermaksud bahawa ia akan mewarisi nilai pembolehubah --color. Walau bagaimanapun, kita boleh mengatasi nilai pembolehubah --warna untuk setiap kotak dengan menggunakan gaya sebaris, seperti yang ditunjukkan dalam contoh berikut:

<div class="box red">
<p>Dua kotak pertama akan mempunyai pembolehubah --warna mereka ditetapkan kepada rgba(0, 255, 0, 0.5) dan rgba(0, 255, 255, 0.5) masing-masing, manakala kotak ketiga akan cuba mewarisi pembolehubah --warna daripada elemen induknya. Walau bagaimanapun, seperti yang kami nyatakan sebelum ini, pembolehubah CSS tidak boleh mewarisi nilai, jadi pembolehubah --color untuk kotak ketiga akan kekal pada nilai lalainya rgba(20, 20, 20, 0.5).</p>
<h3 id="Penyelesaian">Penyelesaian</h3>
<p>Fungsi var() menyediakan cara untuk menentukan nilai sandaran untuk pembolehubah CSS sekiranya pembolehubah tidak ditakrifkan atau ditetapkan kepada nilai awalnya. Nilai sandaran ditentukan sebagai argumen kedua kepada fungsi var(), seperti yang ditunjukkan dalam contoh berikut:</p>
<pre class="brush:php;toolbar:false">background: var(--color, inherit);

Dalam contoh ini, jika pembolehubah --color tidak ditakrifkan atau ditetapkan kepada pembolehubahnya nilai awal, sifat latar belakang akan mewarisi warna elemen induk. Beginilah tingkah laku yang kita mahukan dalam kes ini.

Berikut ialah kod yang dikemas kini dengan nilai sandaran ditambah:

:root {
  --color: rgba(25, 25, 25, 0.5); /* Defined as the default value */
}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 0, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color, inherit);
  filter: invert(1);
}

Kini, ketiga-tiga kotak akan mewarisi warna induknya elemen, walaupun pembolehubah --color ditetapkan kepada nilai yang berbeza dalam gaya sebaris.