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

 

استفاده از calc در گرادینت css
 

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


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

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

 

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

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *