Bagaimanakah Saya Boleh Menggunakan Pembolehubah CSS Tanpa Unit dengan Unit Berbeza?

Cara Menggunakan Pembolehubah CSS Tanpa Unit dengan Fleksibiliti

Pembolehubah CSS tanpa unit menyediakan keupayaan untuk menyimpan nilai angka yang boleh digunakan dengan mudah di seluruh helaian gaya . Walau bagaimanapun, mungkin timbul senario di mana anda ingin menggunakan pembolehubah yang sama dalam konteks yang berbeza, memerlukan unit yang berbeza-beza seperti peratusan atau piksel.

Contoh dilema ini ialah menetapkan pembolehubah CSS dengan nilai 10 tetapi perlu menggunakannya sebagai peratusan dalam satu kejadian dan sebagai nombor biasa untuk pengiraan dalam keadaan lain.

Penyelesaian terletak pada menggunakan fungsi calc(). Dengan melakukan pendaraban mudah pembolehubah dengan unit yang dikehendaki dalam fungsi calc(), kita boleh mencapai fleksibiliti yang diperlukan.

Sebagai contoh, untuk menukar pembolehubah --mywidth dengan nilai 10 kepada peratusan , hanya gunakan:

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

Ini akan menyebabkan sifat lebar ditetapkan kepada 10%, sama seperti dimaksudkan.

Kepelbagaian pendekatan ini meluas kepada pelbagai unit, membolehkan anda bertukar dengan lancar antara peratusan, piksel atau mana-mana unit ukuran lain yang diperlukan dalam lembaran gaya yang sama.

Untuk menggambarkan perkara ini, pertimbangkan coretan 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;
}

Dalam contoh ini, pembolehubah --a digunakan untuk mentakrifkan pelbagai sifat, termasuk lebar, sempadan, latar belakang dan padding. Dengan menggunakan unit dalam fungsi calc(), setiap sifat boleh dilaraskan secara dinamik berdasarkan nilai yang disimpan dalam --a.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pembolehubah CSS Tanpa Unit dengan Unit Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!