شرح صفوف ومحتوى الفقرة
يحول دمج دالة calc() مع المتغيرات المخصصة الأرقام المنفصلة إلى مقياس تصميم مترابط النسب. فعند تخزين وحدة أساسية مثل --unit: 8px ومعامل ضرب مجرد من الوحدة مثل --scale: 1، يمكنك اشتقاق الحشوات والفجوات وانحناءات الزوايا تلقائياً عبر صيغة مثل padding: calc(var(--unit) * 2.5 * var(--scale)).
انتبه لقاعدة جوهرية عند الضرب أو القسمة داخل calc(): اجعل معاملات التكبير أرقاماً مجردة بلا وحدة مثل 1.25 واترك وحدة القياس مثل px أو rem في المتغير الأساسي، أو اضرب الرقم المجرد في 1px لتحويله إلى طول صالح، كما يمكنك توليد لوحة ألوان متناسقة عبر hsl() بتغيير متغير درجة لون واحد --hue.
CSS
:root {
--unit: 8px;
--hue: 262;
}
.metric-card {
padding: calc(var(--unit) * 2.5);
border-radius: calc(var(--unit) * 1.75);
background-color: hsl(var(--hue), 70%, 97%);
border: 2px solid hsl(var(--hue), 55%, 52%);
}