Bolehkah Pembolehubah CSS Digunakan Secara Dinamik dengan Unit Berbeza?

Pembolehubah CSS Tanpa Unit dengan Unit Dinamik

Memanipulasi pembolehubah CSS selalunya boleh menimbulkan cabaran apabila menggunakan kedua-dua nilai berasaskan peratusan dan tanpa unit. Soalan ini meneroka cara untuk menetapkan pembolehubah CSS tanpa unit dan kemudian menggunakannya secara bergantian dengan pelbagai unit.

Soalan:

Bolehkah pembolehubah CSS ditetapkan dengan nombor dan kemudian digunakan sebagai peratusan dalam satu kejadian dan nombor biasa dalam keadaan lain? Contohnya:

--mywidth:10;

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

Jawapan:

Ya, adalah mungkin untuk mencapainya menggunakan fungsi calc(). Dengan mendarab pembolehubah dengan unit yang sesuai, kita boleh menukarnya kepada mana-mana unit yang dikehendaki secara dinamik.

Untuk menggunakan pembolehubah --mywidth sebagai peratusan, kita boleh mendarabkannya dengan 1%:

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

Contoh:

Kod berikut menunjukkan penggunaan fungsi calc() untuk menambah unit secara dinamik pada pembolehubah CSS tanpa unit:

:root {
  --a:50;
}

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

<div class="box"></div>

Atas ialah kandungan terperinci Bolehkah Pembolehubah CSS Digunakan Secara Dinamik dengan Unit Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!