Bagaimanakah saya boleh menggunakan pembolehubah CSS tanpa unit untuk kedua-dua peratusan dan pengiraan?

Pembolehubah CSS Tanpa Unit: Mengendalikan Penukaran Unit

Apabila bekerja dengan pembolehubah CSS, selalunya wajar untuk menggunakan nilai tanpa unit untuk mengekalkan fleksibiliti dan kawalan ke atas pembentangan. Walau bagaimanapun, sifat CSS mengharapkan unit tertentu dalam pelbagai situasi. Panduan ini akan menunjukkan teknik untuk menggunakan pembolehubah tanpa unit dan menukarnya dengan lancar kepada unit yang diperlukan.

Senario:

Anda perlu mentakrifkan pembolehubah --mywidth dengan nilai berangka. Walau bagaimanapun, dalam CSS anda, anda ingin menggunakan pembolehubah ini sebagai kedua-dua peratusan untuk lebar elemen dan nombor biasa untuk operasi calc().

Penyelesaian:

calc() dan Pendaraban Unit:

Untuk mencapai ini, gunakan fungsi calc() dan lakukan pendaraban mudah dengan unit yang dikehendaki. Contohnya:

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

Pendekatan ini menskalakan semula pembolehubah tanpa unit --mywidth kepada nilai peratusan, mematuhi keperluan sifat lebar. Begitu juga, untuk menggunakan pembolehubah sebagai nombor untuk pengiraan, laraskan pengganda dengan sewajarnya:

calc(var(--mywidth) * 1px)

Contoh:

Pertimbangkan kod berikut:

: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>

Dalam contoh ini, pembolehubah --a bermula tanpa unit. Dalam kelas .box, calc() digunakan untuk menukarnya kepada peratusan, piksel dan darjah mengikut keperluan. Hasilnya ialah kotak dengan dimensi yang ditentukan, lebar jidar, sudut kecerunan dan pelapik.

Teknik ini memberi kuasa kepada anda untuk mentakrifkan pembolehubah CSS dengan nilai tanpa unit dan seterusnya menukarnya kepada unit yang sesuai, memberikan lebih fleksibiliti dan kecekapan dalam penggayaan CSS anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan pembolehubah CSS tanpa unit untuk kedua-dua peratusan dan pengiraan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!