بررسی توابع ریاضی در CSS

در سی اس اس هم می توان یکسری عملیات ریاضی را در کدهای css انجام داد که ما به یکسری از آنها اشاره می کنیم:

Calc (1000px + 280px)

با استفاده از این دستور می توان عملیات ریاضی را در دادن اعداد به پراپرتی ها استفاده کرد. به مثال زیر توجه کنید:

.box {
    width: calc(1000px + 280px); /* width : 1280px */
}
.box {
    width: calc(100% - 20px);
}

min و max

دستور min یکسری اعداد مختلف به پیکسل، درصد، ای ام، رم و… دریافت می کند و هر کدوم کوچکتر بود اون رو لحاظ میکنه. تایع max نیز بر عکس این هست و بزرگترین عدد رو انتخاب میکنه. کد زیر رو ببینید:

.box {
    width: min (220px, 15px, 50%, 15rem);
}
.box {
    width: max (220px, 15px, 50%, 15rem);
}

Clamp

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

.box {
    /* width: clamp (min-width, width, max-with); */
    width: clamp (200px, 400px, 800px);

    /* کد بالایی دقیقا با کد پائینی یکی هست */
    min-width: 200px;
    width: 400px;
    max-width: 800px;
}