Sass math.floor() Function

What You’ll Learn

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

What Is math.floor()?

Floor means “round toward negative infinity”—always down to the next whole number if there is any fractional part. Whole numbers are left alone.

• math.floor(4) → 4
• math.floor(4.2) → 4
• math.floor(4.9) → 4
• math.floor(-4.2) → -5 (still toward -infinity)

Use it when overshooting is worse than undershooting—for example how many full columns fit in a width, how many whole steps fit in a budget, or a pixel size that must never exceed a maximum after division.

📝 Syntax

Load the math module, then call the function:

@use "sass:math";

math.floor($number)

Parameters

Return value

📦 Loading sass:math

Like other math helpers, load the module with @use so the call is clearly namespaced.

// Recommended — namespaced
@use "sass:math";
$cols: math.floor(4.9);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$cols: floor(4.9);

// Optional — custom namespace
@use "sass:math" as m;
$cols: m.floor(4.9);

📏 How Units Work

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

🛠 Compatibility

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

Prefer Dart Sass for new work. Older pipelines may still expose the global floor() name.

Examples Gallery

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

@use "sass:math";

@debug math.floor(4);    // 4
@debug math.floor(4.2);  // 4
@debug math.floor(4.9);  // 4

.panel {
  width: math.floor(119.8px);
}

.panel {
  width: 119px;
}

@use "sass:math";

$gap: 1.75rem;
$share: 33.9%;

.card {
  margin-block: math.floor($gap);
  flex-basis: math.floor($share);
}

.card {
  margin-block: 1rem;
  flex-basis: 33%;
}

@use "sass:math";

@debug math.floor(-4.2);  // -5
@debug math.floor(-4);    // -4

.offset {
  // -3.2px → -4px (toward -infinity)
  margin-top: math.floor(-3.2px);
}

.offset {
  margin-top: -4px;
}

@use "sass:math";

$container: 1000px;
$card: 220px;
$columns: math.floor(math.div($container, $card)); // floor(4.545…) → 4

.grid {
  --columns: #{$columns};
  grid-template-columns: repeat(#{$columns}, 1fr);
}

.grid {
  --columns: 4;
  grid-template-columns: repeat(4, 1fr);
}

@use "sass:math";

$base: 7.5px;

@for $i from 1 through 3 {
  .space-#{$i} {
    margin-bottom: math.floor($base * $i);
  }
}

.space-1 { margin-bottom: 7px; }
.space-2 { margin-bottom: 15px; }
.space-3 { margin-bottom: 22px; }

🚀 Real-World Use Cases

• Fit counts — after division, floor so leftover space is unused instead of overflowing.
• Maximum pixel sizes — round fractional widths down so content never exceeds a budget.
• Grid tracks that must fit — claim only whole columns that actually fit.
• Spacing scales — snap fractional steps down to whole CSS lengths.
• Pagination leftovers — sometimes you need full pages only (pair with ceil for total pages).
• Paired with ceil/round — pick the bounding rule that matches your design contract.

⚠️ Common Pitfalls

• Forgetting @use — math.floor is undefined until you load sass:math.
• Confusing floor with truncate — math.floor(-4.2) is -5, not -4.
• Using floor when ceil is needed — undershooting can clip content or leave leftover items without a row.
• Expecting runtime behavior — changing a CSS variable later will not re-run Sass math.floor.
• LibSass pipelines — built-in modules need Dart Sass; migrate or use global floor() carefully.

💡 Best Practices