کلیدواژه calc در CSS یکی از ابزارهای بسیار قدرتمند برای انجام محاسبات ریاضی ساده در تعریف ویژگی‌های CSS است. با استفاده از calc، می‌توانید اندازه‌ها را به صورت انعطاف‌پذیر تعیین کنید و از نیاز به تبدیل دستی اندازه‌ها جلوگیری کنید. برای مثال، می‌توانید با استفاده از این قابلیت، عرض یک عنصر را با استفاده از جمع، تفریق، ضرب یا تقسیم مقادیر مختلف تنظیم کنید.
یکی از استفاده‌های معمول calc در CSS، تنظیم عرض و یا ارتفاع عناصر به گونه‌ای است که بر اساس سایر مقادیر اندازه‌گیری محاسبه شوند. این ویژگی به شما اجازه می‌دهد تا تغییرات مختلف در ابعاد صفحه یا عناصر دیگر را به سادگی مدیریت کنید. به عنوان مثال، می‌توانید حاشیه‌های یک عنصر را در نسبت با اندازه خود عنصر محاسبه کنید.
نیاز نیست همیشه از یکاهایی مثل 'px' یا '%' استفاده کنید؛ قابلیت calc این امکان را به شما می‌دهد تا آنها را به سادگی ترکیب کنید. به این ترتیب می‌توان طراحی‌های انعطاف‌پذیر و واکنش‌گرا ایجاد کرد که به آسانی می‌توانند با تغییر ابعاد مرورگر یا دستگاه هماهنگ شوند.
یکی دیگر از کاربردهای calc، امکان ایجاد فضاهای پویا برای جبران تغییرات اندازه‌ی محتوا می‌باشد. برای مثال، زمانی که می‌خواهید فاصله‌ای مابین دو محتوای انعطاف‌پذیر ایجاد کنید، می‌توانید از محاسباتی استفاده کنید که همواره این فضا متناسب با دیگر ابعاد محاسبه شود.
.example {
width: calc(100% - 50px);
margin-left: calc(20px + 5%);
font-size: calc(1em + 2vw);
}
در مثال بالا یک کلاس CSS تعریف شده است:
width: calc(100% - 50px); عرض عنصر به میزان 100% کل فضای والد قرار دارد و از آن 50 پیکسل کم می‌شود.
margin-left: calc(20px + 5%); مقدار حاشیه چپ بر اساس 20 پیکسل و 5 درصد از پهنای والد محاسبه می‌شود.
font-size: calc(1em + 2vw); اندازه فونت بر اساس 1 واحد ام و 2 درصد از عرض دیدگاه تنظیم می‌شود و به صورت دینامیک تغییر می‌کند.