المتغيرات والدوال (Variables & Functions)
تخلص من تكرار الأكواد باستخدام المتغيرات (Custom Properties)، واجعل عناصرك ديناميكية باستخدام دوال الرياضيات المدمجة.
1. متغيرات CSS (Custom Properties)
تعريف لون أو حجم في مكان واحد، واستخدامه في جميع أنحاء الموقع.
المعاينة
هذا الصندوق يستخدم المتغيرات للون والخلفية
كيف نستخدمها؟
/* 1. تعريف المتغيرات في الجذر */
:root {
--main-color: #0ea5e9;
}
/* 2. استخدامها بكلمة var */
.box {
background: var(--main-color);
}2. الدوال الرياضية (Math Functions)
إجراء عمليات حسابية ديناميكية مباشرة داخل ملفات CSS.
المعاينة
عنصر عرضه (100% ناقص 100px) باستخدام
calc()نص متجاوب سحري باستخدام
clamp() (قم بتغيير حجم الشاشة)أهم الدوال:
calc(100vh - 50px): تقوم بعملية رياضية لدمج وحدات مختلفة (مثل % مع px).clamp(min, ideal, max): تجعل القيمة ديناميكية بين حد أدنى وحد أقصى (ممتازة جداً للخطوط المتجاوبة لتجنب الميديا كويريز).