در حال بارگذاری...

Calc و توابع ریاضی در CSS

درس قبل نام دادید به مقادیر (--token). اینجا همان مقادیر — و طول‌های معمولی — محاسبه می‌شوند موقع رندر: از 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));
}

اینجا calc() یعنی «عرض باقی‌مانده» — در grid، absolute، یا وقتی والد flex نیست خیلی به‌درد می‌خورد. %، rem، px، vw و var() را می‌توانید قاطی کنید اگر خروجی برای آن ویژگی معتبر باشد.

فاصله و قواعد واحد (گیر calc)

غلط: calc(100%-2rem) — قبل از - فاصله لازم است. درست: calc(100% - 2rem). در ضرب یک طرف باید عدد باشد: calc(var(--space) * 2) بله؛ calc(2rem * 3rem) نه.

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) را resolve شده می‌بیند. توکن عدد می‌دهد؛ توابع ریاضی همان را به layout تبدیل می‌کنند.

`min()` و `max()` — کوچک‌ترین یا بزرگ‌ترین

لیست طول با ویرگول. min() کوچک‌ترین را برمی‌گرداند؛ max() بزرگ‌ترین. برای سقف/کف واکنش‌گرا بدون media query برای هر پیکسل:

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 نشود». minmax در grid با min() داخلی جلوی overflow موبایل را می‌گیرد.

`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 رشد کند ولی از سقف/کف بیرون نزند. می‌توانید clamp را داخل --token روی :root بگذارید؛ یک جا عوض کنید، کل مقیاس عوض می‌شود.

کدام را کی بزنیم؟

📊 یک نگاه به توابع ریاضی

تابع	معنی کوتاه	کاربرد معمول
calc()	یک فرمول برای یک ویژگی	کم کردن gutter، جمع offset، دوبل کردن توکن با `* 2`
min()	«از این‌ها بزرگ‌تر نشو»	سقف عرض، انتخاب باریک‌ترِ % و px
max()	«حداقل این قدر»	کف اندازه، حداقل ناحیهٔ لمس
clamp()	کف + دلخواه + سقف یکجا	font-size سیال، padding بخش با حد مشخص

ترکیب هم مجاز است: width: min(100%, calc(var(--max-w) + 2rem)); — وقتی فرمول تکرار شد، ببریدش روی :root تا خوانایی بماند.

الگوی ساده برای ارتفاع صفحه

بیشتر تیم‌ها همین را می‌زنند؛ رابطه را در CSS می‌نویسید نه فقط در JS:

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

الگوی simple را ترجیح دهید اگر layoutتان اجازه می‌دهد؛ درس نشان می‌دهد math functionها چطور وابستگی‌ها را declarative نگه می‌دارند.

خودتان امتحان کنید

دو ستون: --sidebar-w ثابت، روی main مقدار calc(100% - var(--sidebar-w) - gap).
به‌جای font-size: 24px بنویسید clamp(1.25rem, 1rem + 1.5vw, 2rem) و viewport را کوچک/بزرگ کنید.
روی wrapper مقاله min(100%, 40rem) بگذارید؛ با width: 100% مقایسه کنید.
فرمول تکراری را --content-w: min(100% - 2rem, 70rem) روی :root بگذارید و در سه سلکتور reuse کنید.
calc(100%-1rem) را با فاصله درست کنید؛ در DevTools خط‌خورگی اعلان را چک کنید.

اشتباه‌های رایج

calc(100%-2rem) بدون فاصله دور - — کل rule می‌افتد
clamp با min بزرگ‌تر از max — رفتار گیج‌کننده
max() زدن وقتی سقف می‌خواستید (اغلب min())
calc(...) در نام ویژگی — مثل var() فقط مقدار
تقسیم دو طول مثل calc(10rem / 2rem) — تقسیم باید بر عدد باشد

جمع‌بندی

calc() جمع/تفریق/ضرب/تقسیم در مقدار — فاصله دور + و - را فراموش نکنید
min() / max() از بین چند طول کوچک‌ترین یا بزرگ‌ترین را برمی‌گردانند
clamp(کف، دلخواه، سقف) برای تایپ و فاصلهٔ سیال
با var(--token) ترکیب کنید تا layout قابل نگهداری بماند
قدم بعد Modern Toolkit: nesting بومی برای سلکتورهای تمیزتر

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان