جاري التحميل...

Calc والدوال الرياضية في CSS

أعطتك الخصائص المخصصة أسماء للقيم. الدوال الرياضية تجعل تلك القيم (والأطوال العادية) تُحسب وقت العرض: اطرح عرض الشريط الجانبي من 100%، حدّ العمود بـ min()، أو نمِّ الخط بسلاسة بـ clamp() — دون خطوة build في Sass.

`calc()` — حساب داخل قيمة الخاصية

ضع التعبير داخل calc(...). الجمع والطرح يحتاجان مسافات حول العامل:

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

يمكنك خلط % وrem وpx وvw وvar() ما دام الناتج صالحاً للخاصية.

المسافات وقواعد الوحدات

غير صالح: calc(100%-2rem). صالح: calc(100% - 2rem). في الضرب أحد العاملين رقم: calc(var(--space) * 2).

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

calc() يعمل عند حساب القيمة، فيرى var(--space) محلولة — يتكامل مع درس المتغيّرات.

`min()` و`max()`

min() يختار الأصغر؛ max() الأكبر — مفيد لسقوف responsive:

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

min(100% - 2rem, 72rem) يعني «عرض كامل ناقص الهوامش، لكن لا أوسع من 72rem».

`clamp()` — قيمة مرنة بين حدين

clamp(MIN, PREFERRED, MAX) — الحد الأدنى أولاً، الأقصى آخراً:

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

العضو الأوسط غالباً rem + vw لنمو ناعم مع viewport.

أي دالة متى؟

📊 نظرة على الدوال الرياضية

الدالة	الفكرة	استخدام شائع
calc()	معادلة لخاصية واحدة	طرح gutters، مضاعفة token
min()	«لا أكبر من…»	سقف العرض
max()	«على الأقل…»	حد أدنى للحجم
clamp()	min + preferred + max	typography مرنة

يمكن الجمع: width: min(100%, calc(var(--max-w) + 2rem)); — انقل الصيغ المتكررة إلى :root.

نمط بسيط لارتفاع الصفحة

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

فضّل .page-simple عندما يناسب layoutك — الدوال تعبّر عن العلاقات في CSS مباشرة.

جرّب بنفسك

عمودان: --sidebar-w ثابت وcalc على main.
استبدل font-size ثابتاً بـ clamp(...).
min(100%, 40rem) على wrapper مقال.
--content-w على :root لإعادة الاستخدام.
أصلح calc(100%-1rem) بمسافات.

أخطاء شائعة

calc(100%-2rem) بلا مسافات
clamp بحد أدنى أكبر من الأقصى
max() عندما تقصد سقفاً (غالباً min())
calc في اسم الخاصية
قسمة طولين دون مقسوم عدد

ملخص

calc() — مسافات حول + / -
min() / max() — اختيار من قائمة أطوال
clamp() — typography وspacing مرنة
ادمج مع var(--tokens)
التالي: CSS nesting

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة