Sass math.round() Function

What You’ll Learn

math.round() is a bounding helper in the sass:math module. It rounds a number to the nearest whole number and keeps CSS units. You will learn module loading, how round differs from floor and ceil, compiler notes, and five compiled SCSS examples.

What Is math.round()?

Round means “go to the closest whole number.” Values closer to the lower integer go down; values closer to the higher integer go up. Whole numbers stay unchanged.

• math.round(4) → 4
• math.round(4.2) → 4
• math.round(4.9) → 5

Use it for everyday snap-to-pixel sizing when you do not need the strict “never overshoot” rule of floor or the “never undershoot” rule of ceil.

📝 Syntax

Load the math module, then call the function:

@use "sass:math";

math.round($number)

Parameters

Return value

📦 Loading sass:math

// Recommended — namespaced
@use "sass:math";
$size: math.round(4.6);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$size: round(4.6);

// Optional — custom namespace
@use "sass:math" as m;
$size: m.round(4.6);

📏 How Units Work

math.round() rounds the numeric part and keeps the unit attached.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS is always plain numbers.

Examples Gallery

Each example uses @use "sass:math". Open View Compiled CSS to see what Dart Sass emits.

@use "sass:math";

@debug math.round(4);    // 4
@debug math.round(4.2);  // 4
@debug math.round(4.9);  // 5

.panel {
  width: math.round(119.6px);
}

.panel {
  width: 120px;
}

@use "sass:math";

$gap: 1.4rem;
$pad: 1.6rem;

.card {
  margin-block: math.round($gap);
  padding-block: math.round($pad);
}

.card {
  margin-block: 1rem;
  padding-block: 2rem;
}

@use "sass:math";

$base: 17px;
$scale: 1.35;

.icon {
  width: math.round($base * $scale);
  height: math.round($base * $scale);
}

.icon {
  width: 23px;
  height: 23px;
}

@use "sass:math";

$share: 33.333%;

.col {
  width: math.round($share);
}

.col {
  width: 33%;
}

@use "sass:math";

$raw: 4.6px;

.round-demo {
  width: math.round($raw);
}

.floor-demo {
  width: math.floor($raw);
}

.ceil-demo {
  width: math.ceil($raw);
}

.round-demo { width: 5px; }
.floor-demo { width: 4px; }
.ceil-demo  { width: 5px; }

🚀 Real-World Use Cases

• Pixel snapping — clean fractional lengths after scale or division.
• Design tokens — round computed spacing or type sizes to whole units.
• Percent shares — simplify long fractional percentages in output CSS.
• Icon / avatar sizes — keep width and height on matching whole pixels.
• Default bound — reach for round when floor/ceil strictness is not required.
• Paired teaching — compare with floor and ceil to show nearest vs directed rounding.

⚠️ Common Pitfalls

• Forgetting @use — math.round is undefined until you load sass:math.
• Using round when floor/ceil is required — nearest can still overshoot or undershoot relative to a hard budget.
• Expecting runtime behavior — changing a CSS variable later will not re-run Sass math.round.
• Assuming CSS round() appears in output — Sass writes the resolved number, not a CSS function call.
• LibSass pipelines — built-in modules need Dart Sass; migrate or use global round() carefully.

💡 Best Practices