آموزش تابع calc در CSS

یکی از توابع کاربردی در زبان طراحی CSS تابع calc است . در CSS توابعی وجود دارند که طبق موارد تنظیم شده برای آنها ، می‌توانند خروجی مدنظر شما را ایجاد کنند . البته قدرت توابع CSS به اندازه قدرت سایر توابع در زبان‌های برنامه نویسی نیست اما با این وجود توابع پیشفرضی تعریف شده است که می‌توانید با وارد کردن مقادیری داخل این توابع ، برای دیزاین صفحات خود ، دستوراتی را بصورت انعطاف پذیر ایجاد کنید .

یکی از این توابع calc است و همانطور که از نام آن مشخص است ، برای محاسبه به کار می‎‌رود . در طراحی ممکن است شما به مقادیری نیاز داشته باشید که جزئیات در آن مهم باشد . مثلا قصد داریم تا عرض یک المان را به اندازه 100% بعلاوه 10 پیکسل از المان پدر خود تنظیم کنیم .

به عبارتی تصور کنید که یک div با عرض 1000 پیکسل دارید . اگر قصد داشته باشید تا یک div در داخل آن ایجاد کنید که عرض آن 1002 پیکسل باشد در قدم اول اینگونه به ذهنتان خواهد رسید که مقدار width برای فرزند را برابر 1002 تنطیم کنید اما اگر این div پدر در موبایل نمایش داده شود ، عرض آن دیگر 1000 نیست و مسلما کمتر خواهد شد ( اگر پروژه شما با طراحی ریسپانسیو اجرا شده باشد ) .

در این بین اگر شما عرض div فرزند را برابر 1002 درنظر گرفته باشید ، قطعا به مشکل برخواهید خورد چراکه یک width با مقدار ثابت درنظر گرفته‌اید و صفحه شما در موبایل دچار overflow خواهد شد . لذا در این بخش لازم است تا از واحد % برای div فرزند استفاده کنیم و البته دستوری بنویسیم که تحت هر شرایطی ، عرض div فرزند همیشه برابر با 100% عرض div پدر + 2 پیکسل بیشتر باشد . اینجاست که می‌توانیم از calc استفاده کنیم .

استفاده از تابع calc در CSS

برای اینکه از تابع calc استفاده کنید ، لازم است تا بصورت زیر عمل کنید :

.child-div {
	width:calc(100% + 2px);
}

در این دستور ابتدا صفت را تنظیم خواهیم کرد ، یعنی برای width یا height یا padding و … سپس تابع calc را ایجاد کرده و مقدار مدنظر را داخل آن قرار خواهیم داد . در مثال بالا تنظیم کردیم که عرض المان فرزند برابر با عرض 100% والد خود + 2 پیکسل باشد .

این تابع به این ترتیب کاری خواهد کرد تا شما همیشه خیالتان راحت باشد که عرض div شما برابر با 100% بعلاوه همواره 2 پیکسل باشد .

این دستور برای چه ویژگی‌هایی قابل استفاده است ؟

اول از هرچیزی بهتر است بدانیم که تابع مربوطه را برای چه ویژگی‌هایی در CSS می‌توان استفاده کرد . درکل برای اکثر ویژگی‌هایی که مقداری را تنظیم می‌کنند ، امکان تنظیم مقدار آنها توسط تابع Calc وجود دارد . لیست این ویژگی‌ها بصورت زیر است :

Width
Height
Background-Size
Background-Position
Padding
Margin
Z-Index

اکنون می‌توانید برای این ویژگی‌ها ، تابع Calc را بصورت صحیح ( که در ادامه آموزش داده شده است ) استفاده کنید .

نکات مهم مربوط به Calc

باید به حالت نوشتاری این دستور دقت کنید ، برای مثال نمونه زیر یک دستور اشتباه است :

.child-div { width:calc(100% +2px); }

در این دستور عملگر + به عدد 2 چسبیده فلذا دستور شما خروجی نخواهد داشت . همواره عملگر ریاضی باید در وسط قرار داشته باشد . علاوه بر عملگر + می‌توانید از سه عملکر دیگر نیز استفاده کنید :

.child-div { width:calc(100% - 2px); }
.child-div { width:calc(100% * 2px); }
.child-div { width:calc(100% / 2px); }

یک نمونه از مثال‌های استفاده از تابع calc برای تقسیم بندی در ساختار layout است . به مثال زیر دقت کنید :

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

در این دستور ، عرض div با کلاس w50 به اندازه نصف عرض المان والد خود تنظیم شده است . به عبارتی باید یک div با عرض مشخص داشته باشید که این div با کلاس w50 اگر در داخل آن استفاده شود ، عرضش برابر 50% عرض div اصلی باشد . این تقریبا تمامی موارد مربوط به تابع Calc است . اگر تمایل به مطالعه بیشتر در این مورد دارید می‌توانید از منابعی همچون W3schools استفاده کنید . پاینده باشید .