Sass Numeric Functions

Sass Tutorial

Sass Numeric Functions

Sass Numeric Functions are used to work with numbers such as sizes, spacing, calculations, and responsive values.
They help you perform math operations, rounding, and unit handling in a clean and readable way.

🔹 Types of Numbers in Sass

  • Unitless numbers → 10, 1.5

  • Numbers with units → 10px, 2em, 50%

$width: 120px;
$ratio: 1.25;

🔹 Common Sass Numeric Functions

1️⃣ abs()

Returns the absolute value.

abs(-10);

✔ Output:

10

2️⃣ ceil()

Rounds a number up.

ceil(4.2);

✔ Output:

5

3️⃣ floor()

Rounds a number down.

floor(4.9);

✔ Output:

4

4️⃣ round()

Rounds to the nearest whole number.

round(4.5);

✔ Output:

5

5️⃣ max()

Returns the largest number.

max(10px, 20px, 15px);

✔ Output:

20px

6️⃣ min()

Returns the smallest number.

min(5px, 8px, 3px);

✔ Output:

3px

7️⃣ percentage()

Converts a unitless number to percentage.

percentage(0.5);

✔ Output:

50%

8️⃣ random()

Generates a random number.

random(10);

✔ Output:

1–10

9️⃣ unit()

Returns the unit of a number.

unit(10px);

✔ Output:

px

🔟 unitless()

Checks if a number has no unit.

unitless(20);

✔ Output:

true

🔹 Mathematical Operations

Sass supports basic math:

.container {
width: 100% / 2;
padding: 20px + 10px;
}

🔹 Real-Life Example (Responsive Calculation)

$base-size: 16px;

h1 {
font-size: $base-size * 2;
}

🔹 Clamp-Like Calculation Example

$min: 14px;
$max: 24px;.text {
font-size: min(max(18px, $min), $max);
}

❗ Important Notes

✔ Units must be compatible (px + px ✔, px + % ❌)
✔ Sass uses real math, not CSS math
✔ Division / needs clarity (use parentheses if needed)

📌 Summary

  • Its numeric functions help with math & layout

  • Useful for responsive design

  • Supports rounding, unit checking, random values

  • Improves precision & consistency

You may also like...