calc

از تابع ()calc در سی اس اس برای عملیات ریاضی شامل جمع, تفریق, ضرب و تقسیم بر روی مقادیری از نوع طول, زمان, زاویه, فرکانس و انواع اعداد استفاده می شود.

 
این تابع بخصوص برای انجام عملیات ریاضی بر روی مقادیر نسبی (مثل em, rem, vw, %) بسیار کاربردی و مفید است. در مثال زیر عرض یک عنصر نسبت به عرض عنصر نگهدارنده آن (پدرش) محاسبه شده است:

 

.element {
  width: calc(100% - 50% / 2);
}

 

در مثال زیر فاصله خارجی سمت راست یک عنصر به اندازه 10 درصد عرض عنصر نگهدارنده به علاوه 5 پیکسل اضافه تر تعیین شده است:

 

.element {
  margin-right: calc(10% + 5px);
}

 

توجه داشته باشید که باید بین علامت ریاضی جمع و تفریق و مقادیر, یک فاصله وجود داشته باشد در غیر این صورت مرورگر به عنوان نمونه در مثال زیر فرض می کند که یک عدد درصدی دارد و یک عدد منفی در ادامه آن آمده است و محاسبه را انجام نمی دهد اما برای ضرب و تقسیم اگر فاصله وجود نداشته مشکلی وجود نداد و محاسبه صورت می گیرد:

 

  margin-right: calc(10% -5px); /* خطا */
  margin-right: calc(10% +5px); /* خطا */
  margin-right: calc(10%/5px);  /* صحیح */
  margin-right: calc(10%*5px);  /* صحیح */

 

چند مثال

 
تنظیم کردن فاصله های خارجی یک پاراگراف با توجه به واحد اندازه فونت آن:

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}

 

در مثال زیر که از این تابع برای تعیین نقاط ترسیم رنگ در گرادینت استفاده شده است می بینید که ما اصلا نگران اندازه عنصر نیستیم و به راحتی می توانیم گرادینت متقارن با اندازه ای که مورد نیازمان است بسازیم:

.element {
  background-image: linear-gradient(to right, silver,
                                              white 50px,
                                              white calc(100% - 50px),
                                              gold);
}

 

 

می توان از این تابع برای تعیین اندازه ستون های قسمت های مختلف صفحه استفاده کرد در واقع با استفاده از این تابع می توان حتی سیستم grid ساخت:

div.w6 {
  width: calc(100% / 2); /* 50% */
}

div.w4 {
  width: calc(100% / 3); /* 33.33% */
}

 

تابع ()calc بسیار کاربردی است و با توجه به شرایط و نیازهای متفاوت می تواند مورد استفاده قرار بگیرد و پویایی و انعطاف پذیری را در طراحی ما بالا ببرد.

پشتیبانی مرورگر ها

بیشتر بخوانید

• A Complete Guide to calc() in CSS