calc() للحسابات الديناميكية
اخلط الوحدات وأجرِ العمليات الحسابية في CSS باستخدام الدالة calc() للقيم الديناميكية
calc() للحسابات الديناميكية درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هي calc()؟
تتيح لك calc() إجراء العمليات الحسابية مباشرةً ضمن قيم خصائص CSS. ويمكنك مزج وحدات مختلفة (px و% وrem وvw) في عملية حسابية واحدة.
الصيغة الأساسية لـ calc()
تدعم الجمع (+) والطرح (-) والضرب (*) والقسمة (/). ويجب وضع مسافات حول عاملي الجمع والطرح + و-.
<div class="sidebar">Sidebar (100% - 240px)</div>مزج الوحدات
تكمن القوة الكبيرة في calc() في الجمع بين وحدات غير متوافقة، وهو ما كان مستحيلًا لولا ذلك:
<div class="hero">Hero</div>
<div class="column">Column</div>استخدام calc() مع متغيرات CSS
اجمع بين calc() والخصائص المخصّصة في CSS لإنشاء رموز تصميم ديناميكية:
<div class="main">Main content</div>تداخل calc()
يمكن تداخل calc()، مع أن ذلك نادرًا ما يكون ضروريًا، لأن كل سياق يقيّم العمليات الحسابية بالفعل:
<div class="element">Element</div>استخدام calc() للطباعة المرنة
استخدم calc() لإنشاء استيفاء خطي بين حجمين:
<h1>Fluid Heading</h1>القسمة في calc()
تتطلب القسمة أن يكون المقسوم عليه رقمًا من دون وحدات:
<div class="thirds">Third width</div>استخدام calc() مع Grid وFlexbox
تكون مفيدة داخل تعريفات المسارات وقيمة flex-basis:
<div class="grid"><div>A</div><div>B</div></div>مقارنة calc() بالدوال الأخرى
متى تستخدم كل دالة:
calc(): لإجراء العمليات الحسابية العامة، وخاصةً عند مزج الوحداتmin()/max(): لاختيار الأصغر أو الأكبر من بين عدة خياراتclamp(): لحصر قيمة مرنة بين حد أدنى وحد أقصى
دعم المتصفحات
تدعم جميع المتصفحات الحديثة وIE11 الدالة calc(). وهي إحدى دوال CSS الأوسع دعمًا. ويمكن استخدامها بأمان من دون قيم احتياطية في أي مشروع حديث.
الأنماط الشائعة لـ calc()
أنماط عملية ستستخدمها مرارًا:
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>تحقّق سريعًا
أي تعبير calc() ينتج النتيجة الصحيحة لـ "30% من العنصر الأب ناقص 20px"؟
مراجعة
تتيح calc() إجراء العمليات الحسابية في CSS مع مزج الوحدات. وهي تدعم تخطيطات ديناميكية مثل "مساحة إطار العرض كاملةً ناقص ترويسة ثابتة" واستيفاء أحجام الخطوط المرنة. ويجب وضع مسافات حول عاملي الجمع والطرح + و-. اجمعها مع متغيرات CSS لإجراء عمليات حسابية قوية على رموز التصميم. واستخدمها إلى جانب min وmax وclamp للتحكم الكامل في الأحجام المرنة.
الأسئلة الشائعة
هل درس «calc() للحسابات الديناميكية» مجاني؟
نعم — نص درس «calc() للحسابات الديناميكية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «calc() للحسابات الديناميكية»؟
اخلط الوحدات وأجرِ العمليات الحسابية في CSS باستخدام الدالة calc() للقيم الديناميكية تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «calc() للحسابات الديناميكية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- calc() للحسابات الديناميكية
- min() وmax() وclamp() للقيم المرنة
- repeat() وminmax() في Grid
- color-mix() وصياغة الألوان النسبية