Sass math.abs() Function

What You’ll Learn

math.abs() belongs to the built-in sass:math module. It turns any number into its non-negative counterpart while keeping CSS units. This page walks through module loading, units, compiler support, Sass vs CSS abs(), and five compiled examples.

What Is math.abs()?

In math, the absolute value of a number is its distance from zero. So |-7| = 7 and |7| = 7. Sass gives you the same idea while compiling stylesheets:

• math.abs(-10px) → 10px
• math.abs(10px) → 10px
• math.abs(0) → 0

Many CSS properties expect non-negative lengths (width, padding, gap, and so on). When a token or formula might be negative—subtraction, a signed design token, a loop index—math.abs() makes the value safe before CSS is written.

📝 Syntax

Load the math module, then call the function:

@use "sass:math";

math.abs($number)

Parameters

Return value

📦 Loading sass:math

Modern Sass groups built-in helpers into modules. You load them with @use instead of relying on global names.

// Recommended — namespaced
@use "sass:math";
$w: math.abs(-40px);

// Optional — bring members into the current namespace
@use "sass:math" as *;
$w: abs(-40px); // still the math module member

// Optional — custom namespace
@use "sass:math" as m;
$w: m.abs(-40px);

📏 How Units Work

math.abs() changes the sign only. The unit travels with the number.

🛠 Compatibility

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

Prefer Dart Sass for new work. If you maintain an old LibSass pipeline, abs($number) without a module may still be available.

Examples Gallery

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

@use "sass:math";

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

.box {
  width: math.abs(-120px);
  height: math.abs(80px);
}

.box {
  width: 120px;
  height: 80px;
}

@use "sass:math";

$shift: -1.5rem;
$share: -25%;

.card {
  padding-inline-start: math.abs($shift);
  flex-basis: math.abs($share);
}

.card {
  padding-inline-start: 1.5rem;
  flex-basis: 25%;
}

@use "sass:math";

$nudge: -18px;

.badge {
  position: absolute;
  top: math.abs($nudge);
  right: math.abs($nudge);
}

.badge {
  position: absolute;
  top: 18px;
  right: 18px;
}

@use "sass:math";

$delta: -15;
$base: 10;
$progress: math.abs($delta) + $base; // 25

.progress-bar {
  width: $progress * 1%;
}

.progress-bar {
  width: 25%;
}

@use "sass:math";

@for $i from -3 through 3 {
  .item-#{$i} {
    margin-left: math.abs($i) * 10px;
  }
}

.item--3 { margin-left: 30px; }
.item--2 { margin-left: 20px; }
.item--1 { margin-left: 10px; }
.item-0  { margin-left: 0; }
.item-1  { margin-left: 10px; }
.item-2  { margin-left: 20px; }
.item-3  { margin-left: 30px; }

🚀 Real-World Use Cases

• Guaranteed positive lengths — width, height, padding, and gap from signed math.
• Offset tokens — keep a signed design token; emit non-negative insets.
• Progress / scale math — turn a signed delta into a positive share of a bar.
• Loops that cross zero — mirror spacing on both sides of an index.
• Distance between values — when only magnitude matters, not direction.
• First math-module skill — a simple entry point into sass:math.

⚠️ Common Pitfalls

• Forgetting @use — math.abs is undefined until you load sass:math.
• Expecting runtime behavior — changing a CSS custom property later will not re-run Sass math.abs.
• Using abs to hide bad formulas — if the sign is wrong, fix the math when you can; do not only mask it.
• LibSass pipelines — built-in modules need Dart Sass; migrate or use global abs() carefully.
• Confusing with CSS abs() — leaving abs() in CSS output is a different feature with different support.

💡 Best Practices