Sass math.floor()

Definition and Usage

math.floor($number) rounds $number down to the next lowest whole number (toward -infinity). Whole numbers stay the same. Units such as px are kept. Load it with @use "sass:math" (Dart Sass 1.23+ for modules; global floor() also exists).

Syntax

@use "sass:math";

math.floor($number); //=> number (units preserved)

math.floor(4);    // 4
math.floor(4.2);  // 4
math.floor(4.9);  // 4
math.floor(4.9px); // 4px

// Global name (legacy / deprecated in modern Dart Sass)
floor(4.9); // 4

// Module API — prefer math.floor after @use "sass:math"

Pattern: compute a fractional length or count → math.floor so you never overshoot → compare with math.ceil and math.round when the rounding direction differs.

Units and Signs

Floor always moves toward -infinity:

Related Functions

Load with @use "sass:math". Previous: math.div(). Next: math.hypot(). Also: math.ceil(), math.round(), math.abs(), math.min(), math.max().

SCSS Examples

Examples target Dart Sass with @use "sass:math". Open View Compiled CSS for verified output (matches official Sass docs samples).

@use "sass:math";

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

.basic {
  --a: #{math.floor(4)};
  --b: #{math.floor(4.2)};
  --c: #{math.floor(4.9)};
}

.basic {
  --a: 4;
  --b: 4;
  --c: 4;
}

@use "sass:math";

.units {
  --px: #{math.floor(4.9px)};
}

.units {
  --px: 4px;
}

@use "sass:math";

.neg {
  --n: #{math.floor(-4.2)};
  --px: #{math.floor(-4.2px)};
}

.neg {
  --n: -5;
  --px: -5px;
}

@use "sass:math";

.compare {
  --ceil: #{math.ceil(4.2)};
  --floor: #{math.floor(4.2)};
  --round: #{math.round(4.2)};
}

.compare {
  --ceil: 5;
  --floor: 4;
  --round: 4;
}

@use "sass:math";

$w: 12.9px;

.box {
  width: math.floor($w);
}

.box {
  width: 12px;
}

Sass Support

Prefer the module form with Dart Sass 1.23+.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:math"
2. Pass a number (units optional)
3. Expect the next whole value toward -infinity
4. Prefer math.floor over global floor()
5. Use ceil/round when the direction differs