اعداد (Numeric)

توابع عددی Sass برای دستکاری «عدد (Numeric)» استفاده می شوند. یعنی عددها را گرد می کنند، بزرگ ترین یا کوچک ترین را می گیرند، و درصد می سازند. مثل محاسبات کارنامه یا امتیاز بازی، اما داخل استایل ها.

توابع عددی Sass چیست؟

این توابع مقدارها را بالا یا پایین گرد می کنند، قدرمطلق می گیرند، عددها را با واحدهای سازگار مقایسه می کنند، و درصد می سازند. همچنین بیشینه و کمینه را برمی گردانند، و عدد تصادفی تولید می کنند.

نمونه سریع: گرد کردن و قدرمطلق

$a: abs(-15);
$b: ceil(15.20);
$c: floor(15.80);
$d: round(15.20);
$e: round(15.80);

.card {
  --abs: $a;
  --ceil: $b;
  --floor: $c;
  --round1: $d;
  --round2: $e;
}

مشاهده در ادیتور

درصد، بیشینه/کمینه، و سازگاری واحد

«سازگار (Comparable)» یعنی واحدها قابل تبدیل باشند؛ مثل mm و cm. اما px و em متفاوت اند.

$p: percentage(1.2);
$hi: max(5, 7, 9, 0, -3, -7);
$lo: min(5, 7, 9, 0, -3, -7);
$ok1: comparable(20mm, 1cm);
$ok2: comparable(15px, 10px);
$bad: comparable(35px, 2em);

.stats {
  --percent: $p;
  --max: $hi;
  --min: $lo;
  --cmp1: $ok1;
  --cmp2: $ok2;
  --cmp3: $bad;
}

مشاهده در ادیتور

عدد تصادفی برای افکت ها

«تصادفی (Random)» یعنی مقدار غیرقابل پیش بینی. مناسب افکت های جزئی و متنوع.

$r1: random();
$r2: random(6);

.badge {
  opacity: $r1;
}

.dice {
  --face: $r2;
}

مشاهده در ادیتور

نکته: برای نتیجه پایدار در بیلد، از random() با احتیاط استفاده کن. تغییر بی دلیل ممکن است خروجی را ناپایدار کند.

سه گام تمرین سریع

1. یک عدد اعشاری بگیر و با ceil گرد بالا کن.
2. همان عدد را با floor گرد پایین کن.
3. یک لیست بساز و با max بزرگ ترین را بگیر.

برای ادامه، صفحه رشته ها (String) را ببین. سپس با توابع لیست Sass کار کن تا داده ها را بهتر مدیریت کنی. همچنین از اکستند (@extend) برای اشتراک سبک ها کمک بگیر.

جمع بندی سریع

• abs قدرمطلق می دهد.
• ceil و floor بالا و پایین گرد می کنند.
• round نزدیک ترین مقدار را برمی گرداند.
• max و min افراط و تفریط را پیدا می کنند.
• percentage عدد را به درصد تبدیل می کند.