Sass math.ceil()

Definition and Usage

math.ceil($number) rounds $number up to the next highest 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 ceil() also exists).

Syntax

@use "sass:math";

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

math.ceil(4);    // 4
math.ceil(4.2);  // 5
math.ceil(4.9);  // 5
math.ceil(4.2px); // 5px

// Global name (legacy / deprecated in modern Dart Sass)
ceil(4.2); // 5

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

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

Units and Signs

Ceiling always moves toward +infinity:

Related Functions

Load with @use "sass:math". Previous: math.atan2(). Next: math.clamp(). Also: math.floor(), 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.ceil(4);   // 4
@debug math.ceil(4.2); // 5
@debug math.ceil(4.9); // 5

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

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

@use "sass:math";

.units {
  --px: #{math.ceil(4.2px)};
}

.units {
  --px: 5px;
}

@use "sass:math";

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

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

@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.3px;

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

.box {
  width: 13px;
}

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.ceil over global ceil()
5. Use floor/round when the direction differs