متغيرات CSS بدون وحدات: التعامل مع تحويل الوحدات

عند العمل مع متغيرات CSS، غالبًا ما يكون من المرغوب فيه استخدام قيمة بدون وحدات للحفاظ على المرونة والتحكم في العرض التقديمي. ومع ذلك، تتوقع خصائص CSS وحدات محددة في مواقف مختلفة. سيوضح هذا الدليل تقنية لاستخدام المتغيرات بدون وحدات وتحويلها بسلاسة إلى الوحدات المطلوبة.

السيناريو:

تحتاج إلى تحديد متغير --mywidth باستخدام القيمة العددية. ومع ذلك، ضمن CSS الخاص بك، تريد استخدام هذا المتغير كنسبة مئوية لعرض العناصر ورقم عادي لعمليات calc().

الحل:

calc() وضرب الوحدات:

لتحقيق ذلك، استخدم وظيفة calc() وقم بإجراء عملية ضرب بسيطة بالوحدة المطلوبة. على سبيل المثال:

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

يقوم هذا الأسلوب بإعادة قياس المتغير بدون وحدة --mywidth إلى قيمة النسبة المئوية، مع الالتزام بمتطلبات خاصية العرض. وبالمثل، لاستخدام المتغير كرقم للعمليات الحسابية، اضبط المضاعف وفقًا لذلك:

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

مثال:

ضع في اعتبارك الكود التالي:

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

في هذا المثال، يبدأ المتغير --a بدون وحدة. ضمن فئة .box، يتم استخدام calc() لتحويلها إلى نسب مئوية وبكسلات ودرجات حسب الحاجة. والنتيجة هي مربع بالأبعاد المحددة وعرض الحدود وزاوية التدرج والحشو.

تمكنك هذه التقنية من تحديد متغيرات CSS بقيم غير وحدة ومن ثم تحويلها إلى الوحدات المناسبة، مما يوفر قدرًا أكبر من المرونة والكفاءة في تصميم CSS الخاص بك.