Bagaimanakah Saya Boleh Menetapkan Unit Secara Dinamik kepada Pembolehubah CSS?

Penugasan Unit Dinamik kepada Pembolehubah CSS

Dalam CSS, keupayaan untuk menggunakan pembolehubah menawarkan fleksibiliti dan kebolehselenggaraan yang ketara. Walau bagaimanapun, memberikan nilai tanpa unit kepada pembolehubah boleh menimbulkan cabaran apabila menggunakannya untuk tujuan yang berbeza. Artikel ini menangani isu menetapkan pembolehubah CSS dengan nilai berangka dan seterusnya menetapkan unit secara dinamik berdasarkan penggunaan.

Pertimbangkan contoh berikut:

--mywidth: 10;

div {
  width: var(--mywidth) + %;  // should be => width: 10%
}

Matlamatnya adalah untuk menggunakan - -pembolehubah mywidth sebagai peratusan untuk sifat CSS tertentu dan sebagai nombor untuk yang lain, seperti operasi calc().

The penyelesaian terletak pada memanfaatkan kuasa calc(). Dengan melakukan pendaraban mudah antara pembolehubah dan unit yang diingini, anda boleh menetapkan unit secara dinamik mengikut keperluan.

div {
  width: calc(var(--mywidth) * 1%);
}

Pendekatan ini memastikan pembolehubah mengekalkan nilai berangkanya sambil membenarkan anda menentukan unit berdasarkan khusus harta yang anda gunakan.

Sebagai contoh, pertimbangkan contoh berikut:

:root {
  --a: 50;
}

.box {
  width: calc(var(--a) * 1%);  // 50%
  border: calc(var(--a) * 0.5px) solid red;  // 25px
  background: linear-gradient(calc(var(--a) * 0.8deg), blue 50%, green 0);  // 40deg gradient
  padding: 20px;  // 20px
  box-sizing: border-box;
}

Dalam contoh ini, --pembolehubah digunakan di seluruh kelas .box, dengan unit diperuntukkan secara dinamik menggunakan calc().

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Unit Secara Dinamik kepada Pembolehubah CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!