Sass meta.calc-args() Function

What You’ll Learn

meta.calc-args() belongs to the built-in sass:meta module. It returns the argument list inside a CSS calculation such as calc(), clamp(), min(), or max(). This page covers argument types, official samples, nesting, pairing with list helpers, Dart Sass 1.40+, and five examples.

What Is meta.calc-args()?

Modern CSS uses calculation functions like calc() and clamp(). In Sass, those values are a special calculation type. Sometimes you need to look inside them—count arguments, read a min/max bound, or rebuild a new calc. Official docs: meta.calc-args($calc) returns the arguments for the given calculation.

• Numbers stay numbers (for example 50px)
• Nested calculations stay calculation values
• Anything else becomes an unquoted string (for example var(--width) or 100px + 10%)

📝 Syntax

Load the meta module, then call the function:

@use "sass:meta";

meta.calc-args($calc)

Parameters

Return value

📦 Loading sass:meta

// Recommended — namespaced
@use "sass:meta";
$args: meta.calc-args(clamp(1rem, 2vw, 3rem));

// Optional — bring members into scope
@use "sass:meta" as *;
$args: calc-args(clamp(1rem, 2vw, 3rem));

// Optional — custom namespace
@use "sass:meta" as m;
$args: m.calc-args(clamp(1rem, 2vw, 3rem));

🔢 How Arguments Are Typed

Official samples show both shapes clearly:

@use "sass:meta";

// One expression → one unquoted string
meta.calc-args(calc(100px + 10%));
// unquote("100px + 10%")

// Separate args → mix of numbers and strings
meta.calc-args(clamp(50px, var(--width), 1000px));
// 50px, unquote("var(--width)"), 1000px

• clamp / min / max usually expose multiple list items
• A single calc(a + b) expression often collapses to one string item
• Use list.nth / list.length to work with the result

📋 meta.calc-args vs meta.calc-name

🛠 Compatibility

This is about Sass compilers, not browsers. Inspection happens at compile time; browsers only see any CSS you rebuild from the pieces.

Examples Gallery

Each example uses @use "sass:meta". Open View Compiled CSS for verified output (official samples where noted).

@use "sass:meta";

@debug meta.calc-args(calc(100px + 10%));
// unquote("100px + 10%")

.demo {
  --args: #{meta.inspect(meta.calc-args(calc(100px + 10%)))};
}

.demo {
  --args: 100px + 10%;
}

@use "sass:meta";

@debug meta.calc-args(clamp(50px, var(--width), 1000px));
// 50px, unquote("var(--width)"), 1000px

.demo {
  --args: #{meta.inspect(meta.calc-args(clamp(50px, var(--width), 1000px)))};
}

.demo {
  --args: 50px, var(--width), 1000px;
}

@use "sass:meta";
@use "sass:list";

$fluid: clamp(1rem, 2vw + 0.5rem, 2rem);
$args: meta.calc-args($fluid);

.type {
  --min: #{list.nth($args, 1)};
  --preferred: #{list.nth($args, 2)};
  --max: #{list.nth($args, 3)};
  font-size: $fluid;
}

.type {
  --min: 1rem;
  --preferred: 2vw + 0.5rem;
  --max: 2rem;
  font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
}

@use "sass:meta";
@use "sass:list";

$outer: min(80%, calc(100% - 2rem));
$args: meta.calc-args($outer);
$inner: list.nth($args, 2);

.layout {
  --count: #{list.length($args)};
  --inner-name: #{meta.calc-name($inner)};
  --inner-args: #{meta.inspect(meta.calc-args($inner))};
  width: $outer;
}

.layout {
  --count: 2;
  --inner-name: calc;
  --inner-args: 100% - 2rem;
  width: min(80%, calc(100% - 2rem));
}

@use "sass:meta";
@use "sass:list";

$size: min(12px, 1rem, 2vw);

.badge {
  --arg-count: #{list.length(meta.calc-args($size))};
  font-size: $size;
}

.badge {
  --arg-count: 3;
  font-size: min(12px, 1rem, 2vw);
}

🚀 Real-World Use Cases

• Fluid type tooling — expose clamp min / preferred / max as CSS variables for docs or themes.
• Token validation — assert a clamp has three arguments before emitting utilities.
• Nested calc rewriting — walk nested calculations and rebuild adjusted expressions.
• Design-system debugging — @debug meta.calc-args($token) while tuning scales.
• Pair with calc-name — branch on clamp vs min then inspect args.

⚠️ Common Pitfalls

• Passing a plain number — 10px is not a calculation; wrap it in calc()/clamp()/min()/max().
• Expecting split math — calc(100px + 10%) is one string arg, not two numbers.
• Treating var() as a number — custom properties arrive as unquoted strings.
• Old Dart Sass — need 1.40+ for calculation introspection.
• Forgetting list helpers — the return value is a list; use list.nth / list.length.

💡 Best Practices