Sass math.abs()

Definition and Usage

math.abs($number) returns the absolute value of $number. If $number is negative, this returns -$number; if positive, it returns $number as-is. Load it with @use "sass:math" on Dart Sass 1.23+. Global abs() still works.

Syntax

@use "sass:math";

math.abs($number); //=> number

math.abs(10px);   // 10px
math.abs(-10px);  // 10px
math.abs(-4.5);   // 4.5
math.abs(-25%);   // 25%

// Legacy global (prefer module form)
// abs(-10px);

Pattern: compute a signed length or delta → math.abs when you need a positive CSS length → pair with math.clamp or math.min / math.max for ranges.

Units and Signs

Absolute value only flips the sign; everything else stays:

Related Functions

Load with @use "sass:math". Next: math.acos(). Also: math.hypot(), math.clamp(), math.min(), math.max(), math.round().

SCSS Examples

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

@use "sass:math";

@debug math.abs(10px);  // 10px
@debug math.abs(-10px); // 10px

.basic {
  --pos: #{math.abs(10px)};
  --neg: #{math.abs(-10px)};
}

.basic {
  --pos: 10px;
  --neg: 10px;
}

@use "sass:math";

.units {
  --rem: #{math.abs(-1.25rem)};
  --pct: #{math.abs(-25%)};
  --unitless: #{math.abs(-4.5)};
}

.units {
  --rem: 1.25rem;
  --pct: 25%;
  --unitless: 4.5;
}

@use "sass:math";

$offset: -12px;

.layout {
  margin-left: math.abs($offset);
  width: math.abs(-40%);
}

.layout {
  margin-left: 12px;
  width: 40%;
}

@use "sass:math";

$delta: 20px - 48px; // -28px

.gap {
  --raw: #{$delta};
  --abs: #{math.abs($delta)};
  padding: math.abs($delta);
}

.gap {
  --raw: -28px;
  --abs: 28px;
  padding: 28px;
}

@use "sass:math";

.zero {
  --z: #{math.abs(0)};
  --zp: #{math.abs(0px)};
}

.zero {
  --z: 0;
  --zp: 0px;
}

Sass Support

Prefer the module form with a current Dart Sass release.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:math"
2. Call math.abs on signed lengths / deltas
3. Expect units to stay on the result
4. Use CSS abs() only when you need runtime behavior
5. Prefer math.abs over global abs() in new code