🔵 با تابع calc در Css بیشتر آشنا بشید!

تابع ()calc برای انجام عملیات ریاضی ساده و پیشرفته، روی ابعاد و ویژگی‌های یک واحد طراحی وب استفاده میشه. این تابع به طراحان وب امکان میده تا مقادیر پیکسلی، درصدی و دیگر واحدهای مورد استفاده در CSS رو با بقیه ترکیب کنن و به شکل دقیق‌تر کنترل کنن.

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

.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);  /* صحیح */

با استفاده از این تابع، میتونید دقیق تر و حساب شده تر مقادیر پراپرتی هاتون رو حساب کنید. نمونه مثال بیشتر و سایر اطلاعات رو میتونید تو مقاله زیر مطالعه کنید 🏖️

🔵Article

#css #calc
@CodeModule